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.

qTip.js

DOWNLOAD IT HERE

Example page HERE

Features:

Installation:

Paste that css between your HEAD TAGS
<style>
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;
font-size:11px;
text-align: left;
position: absolute;
z-index: 1000;
}
</style>  

Include that javascript between your HEAD TAGS:
Example:

<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.

Configuration:

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: