CSS-only Tooltips
Demo
Move your mouse over the links in the text below to see the tooltips in action.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
The tooltips are not limited to links and can be applied to any element. For example, last word in the text above is wrapped in a <span> tag and has a tooltip.
Source
CSS
.tooltip:hover:after {
content:attr(tip);
position: absolute;
display: inline;
padding: 0 5px;
margin-left: 5px;
max-width: 400px;
background: #111;
background: rgba(0,0,0,.8);
border-radius: 5px;
color: #FFF;
font-size: 14px;
font-weight: normal;
text-shadow: 0 1px 0 #000;
}
HTML
<a href="#" class="tooltip" tip="CSS Tooltip Demo">Link Text</a>
Compatibility
I can confirm this works in Chrome 18, Firefox 7, and Internet Explorer 9.
Final Notes
I opted not to use the title attribute because it was annoying to see both the default tooltip as well as my custom one. This means that older browsers in which this does not work cannot fall back to anything. You can change the attribute on the first line of the CSS (content:attr(tip);) if you'd like.

