Tooltip is (according to Wiki)
a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over.
Just like on this image.
Although in Opera browser I use on a daily basis tooltips are built in (you can turn them on or off) I realize some people don’t use it and still may want to see where the link they are going to click on will redirect them to. So I’ve decided to get some for my site.
First choice was WS ToolTip plugin but I’ve learned it’s based on Dustin Diaz JS script Sweet Titles. I decided to use Sweet Titles then because I think the less plugins you use the better (I mean whenever it’s possible to use some script or change the code instead) – smaller chance any of them won’t cooperate with other ;). It appeared also to be very easy to customize in different ways.
I got read off round corners and double border because they don’t match may site look and feel. I’ve changed colors to match those I use here. Since some of my title as relatively long I decided to make the tooltip box little bit longer and displaying more characters. First dimension might be changed in stylesheet while the second requires change in sweetTitles.js. I have replaced
addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
addy = (anch.href.length > 42 ? anch.href.toString().substring(0,42)+"..." : anch.href);
I only didn’t like thumbs linked to full size images showing tooltip. But I have found solution; it required adding to sweetTitles.js only one line of code
if (current[j].childNodes.nodeName.toLowerCase() != 'img')
for ( j=0; j<curLen; j++ ).
28th October 2007 2 comments