Very Simple CSS/Javascript Tooltips.

Introduction.

I had adopted some rather nifty pure CSS tooltips as described at blogohblog.com. Sadly I discovered that in Google's Chrome browser (I have 19.0.1084.46), these made a real mess, with the tooltip text all over the place and visible all the time. With other browsers it was fine, so I hope Chrome catches up soon.

So I had to come up with a different way of displaying the same result that was OK in Chrome. I assumed this would be best done by mixing the CSS approach with some Javascript.

My modified CSS is as follows:


.withtip {
   position:relative;
}

.tt {
   display:none;
	position:absolute;
	width:180px;
	background-color:#eeeeee;
	border:1px solid #333333;
	top:190px;
	left:250px;
	border-radius: 8px;
	padding:5px;
	font-size:12px;
	color:#333333;
	text-decoration:none;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	z-index:21;
}
The 'withtip class is intended to be used on a DIV that contains a SPAN holding the tooltip text, and some other element - usually an image in my cases - that is to be the subject of the tooltip information.

The SPAN element has absolute positioning within the relative positioned DIV, and a higher z-index. This gives it the required behaviour for a tooltip. The rest of the CSS is amenable to customization. The top and left values are set here for my typical circumstances where most images are 300px wide and about 200px deep.

Given that, then an HTML fragment like:


<div class="withtip"><span class="tt">Tooltip text here</span><img src="twit.jpg" /></div>
Will display as just the plain image, as here:

Tooltip text here

If you temporarily modify the CSS so that .tt has 'display:block;', you'll see the tooltip so you can mess with the styling to suit your taste, as here:

Tooltip text here

What is missing at this point is a mechanism to make the tooltip appear and disappear when the mouse pointer is moved over the image. I used jQuery. Some extra functionality is included to allow placement of the tooltip relative to the target element. Ths is specified in the 'alt' attribute of the DIV>


function eachTip()
{
   // Here this is the actual DIV element, so use $(this) to get a jQuery object
   var s = $(this).attr("alt");

   // Get the span with the text
   var ttspan = $(this).find('span');
   // Get the image - if further target types were to be supported a switch statement
   // here would probably be appropriate
   var img = $(this).find('img');

   // Once we have the target element we can give it a hover handler
   img.hover(function() { ttspan.show(); }, function() { ttspan.hide(); });

   // If there was no position information in the DIV alt, we're done.
   if (s == "" || s == undefined)
      return;
   var a = s.split(",");
   var left = a[0];
   var top = a[1];
   // Adjust the position of the tooltip span
   ttspan.css("top", top+"px").css("left", left+"px");
}

// Call eachTip() for every element with class 'withtip'
function setupTips()
{
   $('.withtip').each(eachTip);
}

// At document ready
$(function() {
   setupTips();
});
Then the effect is as follows - move your mouse cursor over the picture.

Tooltip text here

Fair enough, this is rather basic. There are no bells and whistles like automatic positioning of the tip, or formatting of the tip text, or bubble-shaped tip borders, but this is fine for me. I like to be able to tell them just where they should be, and the simple tips look pretty good. In any case, given the framework that stuff could be added. Also it does seem to be quite portable. In this case specifically Chrome has no problem ;=)