Customising Extended Tooltips

This is another Javascript Tooltip

The extended tooltips created with my script all use the same general appearance for the tooltip popup including background colour, width etc. This may not be exactly what you want as some tooltips might contain just one or two words while others contain wide images. The solution is to customise the appearance of each tooltip to suit the requirements of that tip. We can do this without modifying the Javascript and without modifying what we already have in the stylesheet. All we need to do is to add an additional entry into the stylesheet to specify the custom overrides for a specific tip.

With my sample tooltips I changed the width of the individual tooltips to suit their contents using the following additions to the tooltip.css file:

#t1 {width:130px;}
#t2 {width:480px;}

Of course the width of the tooltip is not the only thing you can change by adding to the stylesheet. Try hovering your mouse over this link where the font size and background colour have been changed by adding a new entry to the stylesheet.

#t3 {font:bold 14pt verdana,arial,sans-serif; background-color:#ffcccc; layer-background-color:#ffcccc;}

By selecting the appropriate entries to add to your stylesheet you can create tooltips with whatever appearance you like. All that you need to do to make these entries specific to a particular tooltip is to attach the stylesheet attributes to the id of that tooltip. The only stylesheet attributes that can't be overridden without breaking the script are position:absolute; z-index:100; visibility:hidden; as changing any of those will stop the script from functioning correctly.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow