Top Menu

ajax scripts script web 2.0 dhtml javascript

Main Menu



Category: Ajax Net.Asp /  Very Bubble Tooltips

Bubble Tooltipsbubble tool tools tips

Nearly two years ago over at 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:

For your convenience, I've prepared a small page with a permanent tooltip in the markup so it would be easier customize the apperence with CSS. When you're done, just be sure to name the CSS file "bt.css". Another thing to notice is that a light bit of transparency is added to the tooltips by javascript: it works in IE from 5.5 on, Firefox and Safari.

Finally a few words on compatibility: bubble tooltips are unobtrosive and for browsers with bad DOM support or javascript disabled, the plain title of links will be displayed. Compatibility is quite good: they've been tested with success in IE5, IE5.5 and IE6 on Win, Opera 8.5, Safari 2.0 and Firefox 1.5. You may download examples, code and graphics in zip format, below. Enjoy!

Demos, examples and download

Hit: 5519.

Write Review