Tooltips are a useful way to provide additional information to the user without requiring the user change their current page.
A simple approach for tooltips is to create a link with a title attribute or a hidden div within the page that will display when the designated link is hovered or clicked. This will certainly get the job done if you have a finite number of tooltips that you need for a page. However the difficulty with this approach becomes apparent when:
- You need the additional information to come from an external page
- You need the same information to appear multiple times throughout a site
Let’s face it as programmers, you want to reduce the amount of upkeep on a site. Just imagine if you need to update each tooltip that appears on each page. The great thing about this approach is that if you ever need to make additional updates, you can do it all from one glossary page and each of the tooltips will automatically be updated as well.
So lets get to it! I’ll start off with the basic simple tooltip and expand upon that approach until we get to our tooltips that are being pulled from an external page.