Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I'm presenting here a translation for the international audience.
Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:
A check for DOM support is performed
If found, the title and href attributes of links are extracted from the page and they're injected into a DOM structure
When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed
Discuss | Trackback |
Add this link to... |
Tell a friend
Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:
A check for DOM support is performed
If found, the title and href attributes of links are extracted from the page and they're injected into a DOM structure
When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed
Discuss | Trackback |
Add this link to... |
Tell a friend
Comments