Excelent JavaScript Tool tip and hint creator
Posted by admin on May 23 2007 10:32:53

Excelent JavaScript Tool tip and hint creator

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.

Excelent Tool tip and hint creator for custom tags.



Example page HERE



Paste that css between your HEAD TAGS
div#qTip {
padding: 3px;
border: 1px solid #000000;
border-right-width: 1px;
border-bottom-width: 2px;
display: none;
background: #e6f2fb;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;

Include that javascript between your HEAD TAGS:

<script language="JavaScript" src="js/qTip.js" type="text/JavaScript"></script>

Open qTip.js and setup which custom tag to be used with hints on mouse over.


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: