In a recent tutorial I taught you how to create simple transparent tooltips with a few lines of CSS and jQuery. Today we will build some more advanced tooltips, based on the aforementioned tutorial.

These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.

We will leave the $document.ready function untouched and make modifications just to the simple_tooltip function. The first improvement is an if statement which checks if the title attribute is set correctly:

Until now the tooltip was always aligned next to the mouse cursor with an offset of 15px. To check if the tooltip would cross the viewports borders we first need to know where the viewports borders are.
Since we align the tooltip at the top right of our mouse we need to know the top edge and the right edge of the browser. Thanks to jQuery this is mere child’s play:

This if statement basically checks if the width of the tooltip plus the x-position of your mouse is smaller than the vieport. If thats the case the tooltip wouldn’t overlap the vieports border and therefore can be aligned next to the mouse.

Great work on this. I’m looking to use this on list items – which works for the most part – unfortunately it seems to lose track of the mouse position when hovering over input elements inside the list. Any suggestions to fix this?

Atom Groom: I havn’t tested this but I believe this will solve your problem, in the line:

left_pos = kmouse.pageX+offset;

Changing offset to half of the tooltip’s width should center it on the mouse.

What would you do if you wanted this to work in conjunction with a Lightbox style image gallery? Generally, the Lightbox takes it’s details for a title from the “title” attribute. This is disabled in the tooltips script so no title is passed when the Lightbox image pops up therefore no image title!

Great Website and Great piece of code … I am just learning Javascript and using your code to support applications in Oracle Apex. I have the tooltips working fine on pages that are submitted and refreshed. Now I am trying to do Ajax calls and only rewriting part of the screen which contain gif where I use the tooltips. I thought I could just call the simple_tooltip function after I perform the dom element inner html replace to update the tooltips but this doesn’t seem to work. Any ideas on what I would have to do to update the tool tips in the Javascript code ? Any help appreciated.

Nice tooltip. Managed to figure out a way to get around the refreshing problem when you are changing the title through an ajax call. What I have done is to append a random number to the id of the div so that when section is refreshed, there will always be a new id.

Great script … I am using your tooltip for images which I am displaying in a jQuery Accordian resizable DIV. The amount of tooltips on the page is about 40-50 (dynamic). I am running into the problem of having a scrollable div when using a appearing at the bottom of the div. If I have alot of tooltips the browser creates a vertical scrollbar on the right and the page jump down to show the selected entry. It appears the browser thinks the size of the DOM includes the tooltip entries. Which it does. I tried putting a separate table before the bottom of the body tag but that did not seem to help. Any suggestions when I am working with so many tooltip beside dynamically creating each one at mouseover time ????

Awesome tutorial adds to your previously good one, if your looking for ideas for a new tutorial a good one would be to show the CSS you did for the rounded corners, I’ve done rounded corner before but not stretchable ones.

PS. I think that hard-coded width of a tooltip is not very good. But as we know, IE6 doesn’t understand max-width css property. This can easily be solved with javascript. Just add this line to the simple_tooltip() function: