Building an Elegant Tooltip Dropdown Menu Powered by jQuery
by Jake Rocheleau
on July 5, 2011
Within the jQuery library it’s possible to create some fantastic effects. These can enhance the overall user experience dramatically and often work hand-in-hand with new CSS3 and HTML5 techniques. As the field of web design has evolved, prominent new techniques have evolved as well.
Below I’ve gone into depth over the process for creating a fantastic navigation menu with tooltips. Each is dynamically generated to hold a small bit of information about the currently targeted link. We’re working with the newest jQuery 1.6.x library and jQuery colortips from Tutorialzine.
There are three (3) major steps to breaking down our code. The first is raw HTML which displays our demo page mockup and how to implement a similar navigation system on your own website. Second we must utilize CSS styles to create our tooltip boxes and pointers. And lastly we must integrate with jQuery and the colortips library to figure out how we should call each tooltip.