Inline Tooltips

This new relatively unobtrusive version of my inline tooltip script uses the actual title attributes already in the web page as the basis for the tooltips that are to be displayed inline. Simply attach the script to the bottom of your page immediately before the </body> tag and every title attribute in the page will become an inline tooltip where your visitors will see a dashed underline beneath each element that has a tooltip associated with it and where that tooltip will be displayed inline at the end of the element if they click on the underlined text. Clicking a second time will make the tooltip text disappear again.

This paragraph demonstrates how the script works by supplying four pieces of text that have a title attribute associated with them (with three of them being nested inside one another so you can see how the script handles tags that are nested that have tooltips associated with them. This is a text and nested more text as well of my new inline tooltip script.

To apply this to the tooltips in your web page simply attach the below script immediately before the </body> tag at the bottom of your web page and it will automatically apply inlining to any title attributes in the page.

JavaScript

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate