GLT - Good-Looking Tooltips | JavaScriptSource

GLT - Good-Looking Tooltips

Robert Nyman Aug 27, 2007

General

This small JavaScript library will spice up the look of your tooltips in your Web page. It replaces the title attribute with a tooltip designed to match your Web site. You can use it in almost an HTML element too. Easy to implement!


Ma quande lingues coalesce, lingue es plu simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Notes

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. Make sure the path is correct.
bottomImagePath : "images/rounded-bottom.gif"
If a bottom design image should be used in the tooltip. Set this to null if not. Make sure the path is correct.
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

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: tooltip.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Other

Download the images using the URL below:

Leave a Response

(2 comments)

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 7, 2007

I have to gridview in my page,when i bind data to it in DataBounf(),and also i put this databound but its not working pls help me to put this tooltip to GridView.[br /]Thank You,

Indunil Udayalal Oct 8, 2007