The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over. A common variant, especially in older software, is displaying a description of the tool in a status bar, but such descriptions are not usually called tooltips. Another system, on the Macintosh computer, that aims to solve the same problem, but in a slightly different way, is balloon help. Another term for tooltip, used in Microsoft end-user documentation, is “ScreenTip”.
Demonstrations of tooltip usage are prevalent on Web pages. Many graphical Web browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element; in such a browser you should be able to hover over Wikipedia images and hyperlinks and see a tooltip appear. Some browsers, notably Microsoft’s Internet Explorer, will also display the alt attribute of an image as a tooltip in the same manner; if a title attribute is also specified, it will override the alt attribute for tooltip content, however. Note that there is some debate over whether this latter usage (alternate text as a tooltip) is proper behavior.
Open the qTip example page and download the qTip.js file. Edit the qTip.js file and modify the 3 lines near the top of the document. There are comments after each line that explain what each variable controls. It’s very intuitive but here’s a quick run down: