I’m not too sure how many of you have come across this but I’m thinking of this as A Good Reminder Post also known as the Public Service Announcement and at the very least a Very Curious Quirk of IE (in particular IE9 and below).
Sometimes when there is already so much going on in a project you might not realize what’s going on so let’s go through the typical scenario.
Sample code of a simple dropdown toggle link
Working example of console object in Chrome
If you love obscure IE problems than this is just the right post for you. The other day I found this nagging issue that just would not go away so let’s talk about it.
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.