Extended Tooltip

5. Customising Tips

The extended tooltips created with this 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:

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.

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.

One final note, there is a problem with Stacking Order relating to some form fields so you should try to avoid placing links that use these tooltips near to form fields, particularly drop down selection lists.

Note that this script and the associated description of how to use it are copied from the "Ask Felgall" website with the permission of the copyright owner.