Friday 1 October 2010

Vertical ticker in tooltip

One of the features I was working on recently was to allow a user to be able to hover over a status label and to show a tooltip. So I ended up using the popular jquery.tooltip plugin Fairly straight forward. But as we all know this evolved to become a little more complex...

The issue with the tooltip was the data being displayed in the tooltip was quite lengthy and therefore the tooltip's stretched off the page. So an idea was to show a fixed height tooltip and as the user hovered over the status the tooltip data would start to scroll upwards, and repeat when it reached the end of the list.

After searching around a bit I discovered Tadas Juozapaitis's excellent jquery.ticker plugin. So I then tried fruitlessly to get them to work together. Eventually I then decided to alter the tooltip code, and inject some of the ticker code within it so that I could force the two to work together.

The result was this. Here is the hybrid plugin

The tooltip now scrolls through the list contained within the tooltip and then continues from the beginning again when it reaches the end.

This plugin is really just a hybrid, so thanks to the excellent work done by Jörn Zaefferer (tooltip) and Tadas Juozapaitis (vTicker). Thanks guys!