Extended Tooltip

4. Linking to Tips

So all that we have to do now is to actually attach the tooltips to the links within our page where we want them to be displayed. The code to do this is inserted into the anchor tag that defines the link. We can define these tooltip links in one of two ways, either we attach the tooltip to an existing link which when clicked on will take you to a different page, or we can set up a link that does nothing when clicked on but which will display our tooltip when the mouse moves over it. The following shows you how to code your anchor tag for the second of these options (where you want the link to go somewhere when clicked you should omit the onclick parameter and code your destination in the href parameter):

As you can see, there are two places in this code where we have referenced the first of the tooltips that we defined before. For each tooltip link that you want to create you use this same code but substitute the id that you defined for the tooltip that you want to attach to the specific link.

Well that's almost all there is too it. With the code that I have given you it will not take you much more effort to create rather fancy tooltips for your pages that greatly extend the user friendliness of your site. You may however want to change the appearance of individual tooltips.

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.