Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: Bubble Tool tips

Saturday, October 11, 2008

Bubble Tool tips

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

Installation and customization of Bubble Tooltips is quite easy. They
are composed mainly of four parts:

A small javascript file of about 2Kb

A small CSS for their presentation

A single image in gif format for their graphics

Four lines of HTML in the head section of the page(s)

The javascript, the CSS and the image just have to be copied in the same directory of the page and with the default presentation don't need changes. The lines that should be inserted in the head section are the following:

<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script>

A very important note: the CSS for the tooltips, named bt.css is added dynamically by javascript only if the browser is found to be DOM-capable. If you're going to modify the file, just be sure to keep its name.

A feature that I thought might be useful is the ability to add the tooltips just to a particular section, identified by an id. So here is the second example, where the tooltips are added just to the main content section, namely the div id="content". As you can see, tooltips are displayed only on the left column. The changes from the first example are very minimal, here are the needed lines in the head section:

<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips("content")}; </script>

On the third line I've put in bold the only part that should be modified to fit your needs - it is the id (between quotes) of the element that will
contain tooltip-powered links.

Now let's look more closely at how tooltips works. A sort of invisible markup is added to the page with the aid of the DOM when the mouse rolls over a link. The

generated markup is like this:

<span class="tooltip"> <span class="top">title of the link</span> <b class="bottom">url of the link, max 30 chars</b> </span>

Each of these span and b element are by default rendered block-level, and the tooltip is positioned by javascript according to the mouse position. The rest of the CSS is fairly simple and uses a single image:

.tooltip,.tooltip *{display:block} /*added by javascript*/

.tooltip{ width: 200px; color:#000;

font:lighter 11px/1.3 Arial,sans-serif;

text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;

background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;

background: url(bt.gif) no-repeat bottom}

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.

Enjoy!

via : web-graphics

Labels: ajax, java script, javascript