GLT implementation

How to use it

To make it work, simply include the JavaScript file in your web page:

<script type="text/javascript" src="js/glt.js"></script>

Customizing the look

Just add these CSS classes to your stylesheet, which you in turn can customize any way you want to:


.glt-elm{
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	color: #fff;
	opacity: 0.9;
	visibility: hidden;
}

.glt-elm p{
	background: #666;
	margin: 0;
	padding: 0.5em;
}

.glt-elm img{
	display: block;
}

and this CSS for IE, if you want to use transparency:


.glt-elm{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}	

Rounded images used in the demo: top rounded image and the bottom rounded image

Parameters

titleClassName : "glt-elm"
CSS class name for the good-looking tooltip element.
topImagePath : "images/rounded-top.gif"
If a top design image should be used in the tooltip. Set this to null if not.
bottomImagePath : "images/rounded-bottom.gif"
If a bottom design image should be used in the tooltip. Set this to null if not.
suppressAltTooltipsInIE : true
If Internet Explorer's faulty implementation of displaying alt attributes should be suppressed or not on elements with a title attribute present.
timeBeforeShow : 500
Time before the tooltip element is shown.
titleOffsetX : 50
Left offset from the mouse position for the tooltip element.
titleOffsetY : 10
Top offset from the mouse position for the tooltip element.
fadeInTitle : true,
If the tooltip should be faded in.
fadeOutTitle : true
If the tooltip should be faded out
fadeStartLevel : 0.5
Starting fade level for fade in, and end fade level for fade out
originalFadeLevel : 0.9
Original opacity of the tooltip element.
fadeIncrement : 0.1
Fade increment value when fading.
timePerFadeStep : 50
Milliseconds between each fade step

Copyright

GLT is free to use in any personal or business web site that is free for visitors to use, if this text is included at the top of the JavaScript file:

GLT is developed by Robert Nyman, http://www.robertnyman.com
For more information and copyright information, please see http://www.robertnyman.com/glt

If you implement it in a situation where you charge your users to see the content, please contact me so we can make an agreement.

Downloads

Download the JavaScript file.