Tooltips Using CSS

First, some simple CSS. This code simply outlines a notice box and then, using CSS trickery, creates an object that looks like a downward facing arrow.

.notice {
	color:white;
	padding:10px;
	background-color:black;
	width:300px;
}
.notice .pointer {
	float:left;
	width:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:20px solid black;
	border-bottom:0;
}

The "float" option dictates which side of the tooltip the arrow will reside on. Similarly, flipping border-top and border-bottom will reverse the direction of the arrow. Changing the border widths will alter the size and scale of the arrow.

Now, just throw the elements together in some DIVs, and it should turn out like the example at the top of the page (besides the rounded corners).

<div class="notice">
	This is some example text to be placed inside the tooltip.
	<div class="pointer"></div>
</div>