GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page. Move your mouse pointer over any of the headings in the main column here to see it in effect.

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);
}	

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 

Demo: http://www.robertnyman.com/glt/index.htm

Download: http://www.robertnyman.com/glt/js/glt.js

Source: http://www.robertnyman.com/glt/index.htm

Related Listings:

1. Bubble Tooltips : Javascript Bubble Tooltips are an easy way to add (via a...
2. HTML – CSS Multiline Tooltips This document explains how to make nice multiline tooltip for...
3. jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...
4. Boxover – Javascript/DHTML Tooltips BoxOver uses javascript / DHTML to show tooltips on a...
5. Style Your Websites Tooltips With Prototip Now it’s very easy to creat complex tooltips. Here is...

Do you like this post?

Email: