It basically makes use of the CSS border property to make pure CSS shapes. In this case, we make a triangle connected to a rectangle giving you a pleasant arrow shape in which to hold your validation message.
Here's what the effect looks like:
And here's some mark-up for you:
.valPointer {
border-color: transparent #e9e9e9 transparent transparent;
border-style: solid;
border-width: 14px 14px 14px 0px;
height: 0px;
width: 0px;
float: left;
}
.valBody {
background: #e9e9e9;
float: left;
height: 28px;
width: 146px;
font: normal 11px arial;
padding: 0 2px 0 5px;
}
<div id="errorArrow" >
<span class="valPointer"></span>
<span class="valBody">This is mandatory. Please enter a value.</span>
</div>
Good little trick and saves you busting Photoshop open. What do you think? Useful? Would you use it?
Thanks to ChrisM for doing some research on this one for me!