« Back to Posts

Improvement to Filament Group's Tooltip Script

Nov 26, 2011

I also made some improvements to the Filament Group's tooltip script. The script already supports ARIA enabled tooltips. I added an additional "tooltip-hidden" class on closed tooltips, support for tooltips added using AJAX in IE, keyboard access to tooltips, dynamic positioning of the tooltips.

I also made some improvements to the Filament Group’s tooltip script. The script already supports ARIA enabled tooltips. I added:

  • An additional “tooltip-hidden” class on closed tooltips
  • Support for tooltips added using AJAX in IE
  • Keyboard access to tooltips
  • Dynamic positioning of the tooltips

They keyboard access is designed mostly to be used with tooltips on link elements, though it only works on elements in the tab order. If you tab to the tooltip, you can hit the enter key to open the tooltip and either hit escape or tab to the next element to close it. One thing to note: this change required moving the inserted tooltip content from immediately before the close body tag to immediately after the tooltip trigger itself. This could result in incorrect HTML (albeit created by JavaScript), if you use a tooltip on something like a list item tag that has a strict containing element.

The dynamic positioning helps with displaying tooltips anywhere on the page. Previously they could run off the edge of the page if the tooltip was positioned too close to the edge. Now they default to the top-right corner of the trigger. If there’s not enough space on the page to the right, it will display to the left. Same thing with the top, where it flips to the bottom. You could end up with a tooltip in the top-right, top-left, bottom-left, or bottom-right. If the browser window is too small to fit any direction… well then you’re stuck.

You can find my changed version for download here.