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 atitle
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.