![]() |
![]() |
Tigra Hints is free JavaScript widget that displays pop-up box with notes (also known as tooltips or hints) when mouse appears over any HTML element on the page. Any HTML is welcome inside the box: lists, tables, images etc. This component makes the site more informative and easy to use while saving valuable space.
Tigra Hints can work with any browser capable of generic DHTML.
Script was
successfully tested on Windows, MacOS, Linux, FreeBSD with these browsers:
Tigra Hints script consists of several files. This makes script maintenance
easier and reduces network load.
Default distribution package contains:
Where * is a wildcard for any substring.
Script files should be attached to HTML document with appropriate tags in header:
<head> <!-- some header data --> <script language="JavaScript" src="hints.js"></script> <script language="JavaScript" src="hints_cfg.js"></script> </head>
Note: Tigra Hints core file has to be always attached before the script configuration and initialization file.
There is no naming or location requirements for script files. They can reside anywhere on the server in the folder accessible from the web. If same files are used by several pages of the site then make sure links are correct for all of them.
Examples of correct script file links | ||||||||||||||||
|
Notes:
Strings displayed in Tigra Hints are stored in a JavaScript array. For each hint (tooltip) you want to be displayed with Tigra Hints you should add its HTML source quoted. For instance, to have 5 different hints the following array is needed:
TIPS_ITEMS = [ 'A hint for a link #1', // a hint #0 'A hint for a link #2', // a hint #1 'A hint for a link #3', // a hint #2 'A hint for a link #4', // a hint #3 'A hint for a link #5' // a hint #4 ];
Normally Hints contents array together with Hints scope settings structure and Hints initialization block resides in separate file, hints_cfg.js. Distribution package Hints contents array is named as TIPS_ITEMS.
Any function returning JavaScript string value can be used as a hint content as well. So, if large number of styled hints is needed, a good solution is to use wrapper functions.
Usually all Tigra Hints of a HTML document are generated by the same JavaScript object. Such way of Hints building allows a number of parameters to be global for all Tigra Hints of a document. Main Hints object scope settings are JavaScript structure that is used to control hints appearing coordinate offsets, time delays and style settings. By default a name of the structure is TIPS_CFG. Below is the list of supported keys with descriptions.
Configuration keys for tree instance scope settings | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Below is the example of Hints scope settings structure declaration:
var TIPS_CFG = { 'top' : 1, // a vertical offset of a hint from mouse pointer 'left' : 1, // a horizontal offset of a hint from mouse pointer 'css' : 'tipClass', // a style class name for all hints, TD object 'show_delay' : 500, // a delay between object mouseover and hint appearing 'hide_delay' : 2000, // a delay between hint appearing and hint hiding 'wise' : false // whether a tooltip should always be visible in full 'z-index' : 0 // a z-index for all hint layers }
Notes:
To display hints when mouse pointer moves above certain elements at your document you should attach appropriate hints to those elements. Tigra Hints can be attached to any HTML element that has "onmouseover" and "onmouseout" modifiers. To attach a hint just add to the element tag the following string:
onmouseover="hints.show(n)" onmouseout="hints.hide()"
Where
For example, if you need to attach #3 hint from the sample hints contents array above to a DIV element, and Tigra Hints object name is default one, that element's tag will look like the following:
<div [some DIV's modifiers] onmouseover="myTip.show(3)" onmouseout="myTip.hide()">
Usually, there is only one JavaScript object needed to generate Tigra Hints for an HTML document. By default it is initialized at hints_cfg.js file with the following string:
var myTip = new TTip (TIPS_CFG, TIPS_ITEMS);
Where
However, in case you need several, with different settings, big enough groups of Tigra Hints in one document, there should appropriate number of Tigra Hints main object constructor calls be made:
var // constructor for an object with TIPS_CFG0 scope settings and TIPS_ITEMS0 contents array Hints0 = new TTip (TIPS_CFG0, TIPS_ITEMS0), // main object with // constructor for an object with TIPS_CFG1 scope settings and TIPS_ITEMS1 contents array Hints1 = new TTip (TIPS_CFG1, TIPS_ITEMS1), .... // constructor for an object with TIPS_CFGN scope settings and TIPS_ITEMSN contents array HintsN = new TTip (TIPS_CFGN, TIPS_ITEMSN)
Just don't forget to declare all main object scope settings structures and arrays of hints contents
There is no license fee or royalty fee to be paid at any time for using
the Tigra Hints v1.x
You may include the source code or modified source
code within your own projects for either personal or commercial use but
excluding the restrictions outlined below. The following restrictions apply to
all parts of the component, including all source code, samples and
documentation.