| About Us | Services | Download | Order | Support | |

Tigra Hints v2.1 - Documentation

Table of Contents

• Table of Contents
• Description
• Features
• Compatibility Table
• Using this Document
• Code Organization
• Configuration Structure
• Transition Effects
• Hints List
• Terms and Conditions
• Links and References

Description

Tigra Hints is free JavaScript component that displays rich HTML content in pop-up boxes. Also known as tooltips or hints, these boxes can be activated on any event (such as mouseover or click) and provide or request context sensitive information.

Here are some application examples:

• HTML page contains the series of the thumbnail images. When viewer hovers the thumbnail with the mouse pointer, the full sized graphics is displayed next to the thumbnail.
• The web application outputs the table generated from the database. When user clicks the table row, the form for editing the record pops-up next to the selected row.
• The web based interactive map displays different objects. When object is hovered the map opens up the box with the detailed information about it.

Features

• Creates reach HTML tooltips (can be used for full size previews, pop-up forms etc.)
• Can be activated from any visible HTML element by any event
• Optional configurable show/hide delay
• Can control existing or dynamically created HTML elements
• Intelligent positioning algorithm ensures hint is inside the visible area of the document and doesn't cover source element
• Amazing transition effects (IE5+ only)
• Can be attached to any element on the page or to the mouse pointer ("follow the mouse" mode)
• CSS class applicable to the contents of the pop-up
• Configuration shared by a group of hints. Unlimited number of hints in the group, unlimited number of groups within the document
• Addresses the bug in IE which makes the selectboxes visible through the document layers
• Object oriented implementation, easy to read, learn and customize
• Easy setup - no programming skills required. Multiple commented samples, public forum and other support materials are provided
• All popular browsers supported
• The script is free for any applications (including commercial)

Compatibility Table

Tigra Hints software is known to be working with any relatively modern browsers.
The table below lists some of the browsers the script was successfully tested with.

Note: Transition Effects are only supported in Internet Explorer v.5 or higher

Using this Document

Tigra Hints component is provided in form of the distribution package that contains the series of well commented functional samples. In many cases these samples can be customized and reused without thoroughly reading the documentation. Use this page as the reference and for troubleshooting purposes.

In this document we'll be using the following terms:

• origin - object used to position the hint
• activation - event generated in the document that triggers the hint
• hint - pop-up HTML element displayed in the document's layers

Code Organization

Tigra Hints have to be embedded and properly configured in the HTML page. Below is the list of the elements of the Tigra Hints configuration:

Note: JavaScript and CSS elements can be either embedded into the HTML document directly or saved in the external file and referenced via the link. Generally if the JavaScript element is used in more than one page then it makes sense to put it in the linked external file. This allows browser to cache and reuse the content between page loads. This also simplifies the configuration management because changes applied in the external file will automatically apply to all the documents it is linked to.

Hint's Elements Examples

Linked Script's code (head)

<!-- link Tigra Hints script file -->
<script language="JavaScript" src="tigra_hints.js"></script>

Embedded CSS classes (head)

<style>
	.hintsClass {
		font-family: tahoma, verdana, arial;
		font-size: 12px;
		background-color: #f0f0f0;
		color: #000000;
		border: 1px solid #808080;
		padding: 5px;
	}
</style>

Linked CSS classes (head)

	<link rel="stylesheet" href="hints.css" />

Embedded Configuration and Hints List (head or body)

<script language="JavaScript">

// configuration variable for the hint object, these setting will be shared among all hints created by this object
var HINTS_CFG = {
	'wise'       : true,
	'margin'     : 10,
	'gap'        : 0,
	'align'      : 'tcbc',
	'css'        : 'hintsClass',
	'show_delay' : 200,
	'hide_delay' : 500,
	'follow'     : false,
	'z-index'    : 100,
	'IEfix'      : false,
	'IEtrans'    : ['blendTrans(DURATION=.3)', 'blendTrans(DURATION=.3)'],
	'opacity'    : 100 // opacity of the hint in %%
};
// text/HTML of the hints
var HINTS_ITEMS = [
	'short definition',
	'tooltip for item2 with some <b>HTML</b>',
	'tooltip for item3<br />This one is multi line',
	'tooltip for item4',
	'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
];
</script>

Existing Hints (body)

<div id="preExHint1" style="position:absolute;z-index:1;visibility:hidden;width:250px;height:300px;">
	Sample Hint
</div>

Initialization (body)

<script language="JavaScript">
	var myHint = new THints (HINTS_ITEMS, HINTS_CFG);
</script>

Event Hookups (body)

<img src="img/k001.jpg" width="100" onMouseOver="myHint.show('tt1', this)" onMouseOut="myHint.hide()" />

Configuration Structure

Tigra Hints configuration is a JavaScript array of key:value pairs. Table below lists all the supported keys and their accepted values.

Notes: Use of the JavaScript structure as for the script configuration makes it very efficient because no additional parsing is required, but this also makes it very syntax sensitive. Below are some recommendations on how to avoid or detect the configuration problems:

• Start with working sample and make changes one at a time checking if the script still works after each modification
• Enable the JavaScript error notification in the browser you're using. Browser will generate "VARNAME is undefined" if there is a syntax error in the configuration
• Copy-and-Paste the keys to avoid misspelling and letter capitalization errors
• Make sure the keys and string values are enquoted and opening and closing quote characters are the same (either ' or ")
• If quote character must be used inside of the string it should be "escaped" with the slash. Example: 'I don\'t know'
• Opening and closing quote characters of the string must be on the same line in the file. Substrings and the concatenation with + can be used for splitting the string into multiple lines.
• Check that all key:value pairs are separated with commas and there is no comma after the last pair
• Verify that the name of the variable matches that you pass to the hint's initialization call

Configuration Structure Sample

var HINTS_CFG2 = {
	'wise'       : true,
	'margin'     : 10,
	'gap'        : 20,
	'align'      : 'bctc',
	'css'        : 'hintsClass2',
	'show_delay' : 200,
	'hide_delay' : 500,
	'follow'     : false,
	'z-index'    : 100,
	'IEfix'      : false,
	'IEtrans'    : ['revealTrans(TRANSITION=3,DURATION=.5)', 'revealTrans(TRANSITION=2,DURATION=.5)'],
	'opacity'    : 80
};

See other notes in Code Organization section of this document.

Transition Effects

The transition effects are supported in Internet Explorer version 5 or later. The table below lists the effects that can be used in the IEtrans key in the configuration structure.

Transition Effect Samples

Show: Wipe Down (0.5 seconds), Hide: None

	'IEtrans': ['revealTrans(TRANSITION=5,DURATION=.5)', null]

Show: None, Hide Circle in (0.6 seconds)

	'IEtrans': [null, 'revealTrans(TRANSITION=2,DURATION=.6)']

Show: Circle out (0.5 seconds), Hide Circle in (0.6 seconds)

	'IEtrans': ['revealTrans(TRANSITION=3,DURATION=0.5)', 'revealTrans(TRANSITION=2,DURATION=.6)']

Show and Hide: Blending (0.5 seconds)

	'IEtrans': ['blendTrans(DURATION=.5)', 'blendTrans(DURATION=.5)']

	'IEtrans': ['blendTrans(DURATION=.5)']

Show and Hide: No effects

	'IEtrans': []

	'IEtrans': null

Hints List

Tigra Hints configuration is a JavaScript array containing the HTML code for individual hints. The hints can be ordered (with indexes starting from 0) or they can be provided with the text keys (key:hint pairs). The indexes or keys are used in the event hookups where the HTML fragments are linked to their activating elements.
Based on the HTML code provided in the Hits List the script will generate DHTML elements and absolutely position them in the document layers at the initialization time. Hints List is not required when pre-existing hints are used instead.

Below are some examples of the hint lists:

// numeric index based list of hints
var HINTS_ITEMS = [
	'short definition',
	'tooltip for item2 with some <b>HTML</b>',
	'tooltip for item3<br />This one is multi line',
	'tooltip for item4',
	'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
];

// text keys based list of hints
var HINTS_ITEMS = {
	'short'   : 'short definition',
	'someHTML': 'tooltip for item2 with some <b>HTML</b>',
	'multi'   : 'tooltip for item3<br />This one is multi line',
	'short2'  : 'tooltip for item4',
	'linked'  : 'another sample tooltip with the <a href="http://www.softcomplex.com">link</a>'
};

JavaScript functions can be used to repeat HTML fragments in multiple hints. This makes the configuration faster to load and simpler to manage. For example following variable:

// using wrapper functions for repeating HTML fragments
var HINTS_ITEMS = [
	myWrap('picture1'),
	myWrap('picture2'),
	myWrap('picture3'),
	myWrap('picture4')
];

function myWrap (s_imgName) {
	return '<img src="/img/' + s_imgName + '.jpg" border="1" />';
}

is the equivalent of:

// using wrapper functions for repeating HTML fragments
var HINTS_ITEMS = [
	'<img src="/img/picture1.jpg" border="1" />',
	'<img src="/img/picture2.jpg" border="1" />',
	'<img src="/img/picture3.jpg" border="1" />',
	'<img src="/img/picture4.jpg" border="1" />'
];

Now if path to images needs to be changed then in first version it will require one change while in second - four changes. This technique makes even more sense with more complex HTML formatting including tables and graphics.

Notes:

• Text keys must be unique. It is recommended (but not required) that the keys only contain the alphanumeric characters.
• Hints in the lists are comma separated. Make sure there are commas between the hints and no comma after the last hint before the closing bracket.
• See other notes in Code Organization section of this document.
• Use troubleshooting techniques outlined above for Configuration Structure

Terms and Conditions

• is free donations supported software. It can be used for any kind of applications without the registration or licensing fee. Users are not required to provide any information to obtain or use the script
• doesn't contain any ad-ware, spy-ware or any other hidden functionality
• is supported at no cost to users in the public forum (account creation required)
• is distributed in the open source. User modifications are allowed. The product information at the top of the script file must remain unchanged. The contributor notes can be added below it
• is provided "as is" without any expressed or implied warranties

Links and References

• Softcomplex Inc. site
• Tigra Hints product page
• Tigra Hints documentation
• Tigra Hints Online Demo
• Free Download
• Technical Support and Feedback
• Donate [$5] [$10]