There’s no need to explain what a tooltip is and you already know that using tooltips can help you increase usability. Therefore, in this article we’ll concentrate just on the practical side.
So, today you’ll learn how to create awesome CSS3 & jQuery tooltips.
You may already read my previous CSS3 tooltips tutorial, but this time we’ll use some jQuery and HTML5 data-* attributes for our tooltips.
The major advantages of these tooltips are:
As you can see below, thanks to the new HTML5 custom data attributes, our tooltip structure looks as clean as possible:
Here are the styles used in order to create this 3D looking tooltip:
Basically, the jQuery code does all the “dirty” job for you. Using the HTML5
data-tooltip attribute value, it appends a new HTML node:
<span class="tooltip-content"> which will be animated using CSS3.
IE6 gets some extra treatment, as you can see above.
As usual, this demo also works across all major browsers:
I hope that you enjoyed this tutorial and if you have any comments or questions feel free to add them below. Thanks for reading!
Stylish CSS3 progress bars
CSS3 pricing table