Tigra Hints Softcomplex Logo

Tigra Hints Documentation

Table of Contents

Description

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.

Features

Compatibility List

Tigra Hints can work with any browser capable of generic DHTML.
Script was successfully tested on Windows, MacOS, Linux, FreeBSD with these browsers:

Files

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
Document Location Correct Links
Tigra Hints Script http://www.domain.com/tigra_js/tree.js -
Page #1 http://www.domain.com/tigra_js/doc1.html http://www.domain.com/tigra_js/hints.js (Absolute w. domain)
/tigra_js/hints.js (Absolute w/o domain)
hints.js (Relative)
Page #2 http://www.domain.com/dir1/doc2.html http://www.domain.com/tigra_js/hints.js (Absolute w. domain)
/tigra_js/hints.js (Absolute w/o domain)
../tigra_js/hints.js (Relative)
Page #3 http://www.domain.com/dir1/dir2/doc3.html http://www.domain.com/tigra_js/hints.js (Absolute w. domain)
/tigra_js/hints.js (Absolute w/o domain)
../../tigra_js/hints.js (Relative)

Notes:

Contents Filling

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.

Main object scope settings

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
Key Description Unit Accepted Values Default Value
 
Positioning
left A horizontal offset of the upper left corner of a hint from a point where mouse pointer will cross a border of a HTML element the hint is attached to. Positive direction is rightward. pixel Integer value 0
top A vertical offset of the upper left corner of a hint from a point where mouse pointer will cross a border of a HTML element the hint is attached to. Positive direction is downward. pixel Integer value 0
wise Indicates whether a tooltip should be always positioned to be fully visible. If set to true, a tooltip whose part is appearing to be beyond browser window border is moved toward the window center until visible in full. none Boolean value:
false - no, true - yes
false
follow Indicates whether a tooltip should follow mouse pointer movements while it is visible. none Boolean value:
false - no, true - yes
false
Time delays
show_delay A time delay between a moment of mouse pointer crosses a border of a HTML element the hint is attached to and a moment of the hint appearing. If mouse pointer is moved away from over the element, and the hint is not displayed yet, the hint will not be displayed. millisecond Non-negative integer value 0
hide_delay A time delay between moment of hint appearing and disappearing. If mouse pointer is moved away from over a HTML element the hint is attached to, and the hint is already displayed, the hint disappears immediately.
Zero (0) value means hints will be visible as long as mouse pointer stays over the element.
millisecond Non-negative integer value 0
Look
css A style class to apply to all tooltips generated by a Tigra Hints object. A HTML element the style to be applied to is TD. none Valid style class name no style
z-index A z-index value for all layer objects generated by Tigra Hints. It is useful if you want Tigra Hints to appear above or below some layers of your document. none Non-negative integer value 0

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:

Attaching to HTML elements

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()">

Initialization

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

Terms and Conditions

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.

Links and References