Making tool tips using Ajax

Web browsers render the contents of the title attributes in a tool tip. There are some problems with the browsers' tool tips such as:

• Their appearance isn't consistent across browsers

• Browser tool tips can't be styled

To solve these aesthetic UI issues, we have a number of jQuery plugins. In this recipe, we'll look into using the BeautyTips plugin to get tool tips.

Getting ready

We'll require the BeautyTips jQuery plugin from http://plugins.jquery.com/project/bt along with jQuery Core. Optionally, we may require the following:

• ExplorerCanvas from http://excanvas.sourceforge.net/ to support the canvas element in Internet Explorer. Note that BeautyTips uses the canvas element for generating bubble tips.

• The hoverIntent plugin from http://cherne.net/brian/resources/jquery.hoverIntent.html, as it changes the hover behavior. jQuery's default hover event fires whenever a bound element is hovered upon, and that sometimes creates poor user experience—especially when the user...