Tooltips with Javascript or CSS

For the Wyoming Liberty Index, I created a quick webpage using Catalyst and Perl to help rate the bills of the 2006 legislative session. On one page, I wanted to display the ratings of the bills with comments appearing as tooltips for the ratings. My first attempt was to use the title attribute on the abbr tag, but browsers only display a short summary of the title attribute as a tooltip. I wanted to display the entire comment.

CSS

My first solution was to use pure CSS tooltips. I had to make two changes to get it working in Internet Explorer. First, IE doesn't support the :hover pseudo-class on tags other than a, so I had to change the outermost tag on my tooltips to be a instead of span. Secondly, by hacking on Eric Meyer's pure CSS popups code, I determined that unless you have the following CSS somewhere, Internet Explorer won't display the tooltips.

a:hover {
  background : white; /* a color other than default */
}

Javascript

After I got the CSS hacked into shape and working acceptably, I discovered Alessandro Fulciniti's simple Javascript tooltip library. I had investigated a bunch of Javascript tooltip libraries and they were all too complex. Fulciniti's approach is simple and clean. It keeps Javascript, XHTML and CSS separated, the way it should be. With a few minutes hacking, I had it doing exactly what I wanted.

Thank you Alessandro.