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

Created by: Robert Nyman
Web Site: http://www.robertnyman.com
Posted: August 27, 2007

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Robert Nyman | http://www.robertnyman.com */
/*
	GLT is developed by Robert Nyman, http://www.robertnyman.com
	For more information and copyright information,
 please see http://www.robertnyman.com/glt
*/

var GLT = {
	// Customization parameters
	titleClassName : "glt-elm",
	topImagePath : "rounded-top.gif",
	bottomImagePath : "rounded-bottom.gif",
	suppressAltTooltipsInIE : true,
	timeBeforeShow : 100,
	titleOffsetX : 50,
	titleOffsetY : 10,
	fadeInTitle : true,
	fadeOutTitle : true,
	fadeStartLevel : 0.5,
	originalFadeLevel : 0.9,
	fadeIncrement : 0.1,
	timePerFadeStep : 50,

	// GLT parameters
	titleElm : null,
	titleTextElm : null,
	titleTopImage : null,
	titleBottomImage : null,
	elementsWithTitles : null,
	currentElm : null,
	currentTitle : "",
	currentFadeLevel : 0,
	fadeTimer : null,

	init : function (){
		if(document.getElementById){
			this.elementsWithTitles = getElementsByAttribute(document, "*", "title");
			if(this.elementsWithTitles.length > 0){
				this.titleElm = document.createElement("div");
				this.titleElm.className = this.titleClassName;
				if(this.topImagePath){
					this.titleTopImage = document.createElement("img");
					this.titleTopImage.setAttribute("src", this.topImagePath);
					this.titleElm.appendChild(this.titleTopImage);
				}
				this.titleTextElm = document.createElement("p");
				this.titleElm.appendChild(this.titleTextElm);
				if(this.bottomImagePath){
					this.titleBottomImage = document.createElement("img");
					this.titleBottomImage.setAttribute("src", this.bottomImagePath);
					this.titleElm.appendChild(this.titleBottomImage);
				}
				document.body.appendChild(this.titleElm);
				this.useMSFilter = typeof this.titleElm.style.filter != "undefined";
				this.applyEvents();
			}
		}
	},

	applyEvents : function (){
		var oElm;
		var strClassName;
		for(var i=0; i<this.elementsWithTitles.length; i++){
			oElm = this.elementsWithTitles[i];
			if(this.suppressAltTooltipsInIE){
				oElm.setAttribute("alt", "");
			}
			oElm.onmouseover = GLT.mouseOverElm;
			oElm.onmouseout = GLT.mouseOutElm;
		}
		if(this.clickDocumentToClearFocus){
			this.addEvent(document, "click", function(){FaT.clearFocus();}, false);
		}
	},

	mouseOverElm : function (oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		if(typeof GLT != "undefined"){
			GLT.startTimer(this, oEvent);
			oEvent.cancelBubble = true;
			oEvent.returnValue = false;
			if(oEvent.stopPropagation){
				oEvent.stopPropagation();
			}
		}
	},

	mouseOutElm : function (oEvent){
		var oEvent = (typeof oEvent != "undefined")? oEvent : event;
		if(typeof GLT != "undefined"){
			GLT.hideTitle(this, oEvent);
		}
	},

	startTimer : function (oElm, oEvent){
		if(!this.currentElm || this.currentElm != oElm || this.fadeTimer > 0){
			if(this.fadeTimer){
				clearTimeout(this.fadeTimer);
			}
			if(this.currentElm){
				this.hideTitle(null, false, true);
			}
			this.currentElm = oElm;
			this.currentTitle = this.currentElm.getAttribute("title");
			this.currentElm.setAttribute("title", "");
			this.currentX = oEvent.clientX;
			this.currentY = oEvent.clientY;
			this.fadeTimer = setTimeout("GLT.showTitle()", GLT.timeBeforeShow);
		}
    },

	stopTimer : function (oElm){
		clearTimeout(GLT.fadeTimer);
    },

	showTitle : function (){
		this.setTitlePos();
		this.titleTextElm.innerHTML = this.currentTitle;
		this.titleElm.style.visibility = "visible";
		if(this.fadeInTitle){
			this.currentFadeLevel = this.fadeStartLevel;
			this.fadeIn();
		}
	},

	hideTitle : function (oElm, oEvent, forceHide){
		if(this.currentElm && (oElm || forceHide)){
			var bIsChildOfCurrentElm = false;
			if(typeof oEvent != "undefined" && typeof oEvent == "object"){
				var oEventTarget = (typeof oEvent.relatedTarget != "undefined")? oEvent.relatedTarget : oEvent.toElement;
				if(oEventTarget){
					while(!bIsChildOfCurrentElm && oEventTarget && oEventTarget.nodeName && oEventTarget.nodeName.search(/body/i) == -1){
						if(oEventTarget == oElm){
							bIsChildOfCurrentElm = true;
							break;
						}
						oEventTarget = oEventTarget.parentNode;
					}
				}
			}
			if(!bIsChildOfCurrentElm){
				this.stopTimer();
				if(this.fadeOutTitle && (typeof forceHide == "undefined" || !forceHide)){
					this.fadeOut();
				}
				else{
					clearTimeout(this.fadeTimer);
					this.currentElm.setAttribute("title", this.currentTitle);
					this.currentElm = null;
					this.titleElm.style.visibility = "hidden";
				}
			}
		}
	},

	setTitlePos : function (){
		var arrScroll = this.getWinSizeAndScroll();
		var intTitleElmWidthAndPos = this.titleElm.offsetWidth + this.currentX + this.titleOffsetX;
		var intDiff = intTitleElmWidthAndPos - arrScroll[0];
		var intX = (intDiff > 0)? (this.currentX - intDiff) : (this.currentX + this.titleOffsetX);
		this.titleElm.style.left = intX + arrScroll[2] + "px";
		this.titleElm.style.top = this.currentY + arrScroll[3] + this.titleOffsetY + "px";
	},

	fadeIn : function (fadeOut){
		this.currentFadeLevel = this.currentFadeLevel + this.fadeIncrement;
		if(this.currentFadeLevel < this.originalFadeLevel){
			this.fadeTimer = setTimeout("GLT.fadeIn()", GLT.timePerFadeStep);
		}
		else{
			this.currentFadeLevel = this.originalFadeLevel;
			clearTimeout(this.fadeTimer);
		}
		this.setFade();
	},

	fadeOut : function (){
		this.currentFadeLevel = this.currentFadeLevel - this.fadeIncrement;
		if(this.currentFadeLevel > this.fadeStartLevel){
			this.fadeTimer = setTimeout("GLT.fadeOut()", GLT.timePerFadeStep);
		}
		else{
			this.currentFadeLevel = this.originalFadeLevel;
			this.hideTitle(null, false, true);
		}
		this.setFade();
	},

	setFade : function (){
		// This line is b/c of a floating point bug in JavaScript
		this.currentFadeLevel = Math.round(this.currentFadeLevel * 10) / 10;
		if(this.titleElm){
			if(this.useMSFilter){
				this.titleElm.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.currentFadeLevel * 100) + ")";
			}
			else{
				this.titleElm.style.opacity = this.currentFadeLevel;
			}
		}
	},

	getWinSizeAndScroll : function (){
		var intWidth = document.body.offsetWidth;
		var intHeight = (typeof window.innerHeight != "undefined")? window.innerHeight : (document.documentElement && document.documentElement.clientHeight > 0)? document.documentElement.clientHeight : document.body.clientHeight;
		var intXScroll = (typeof window.pageXOffset != "undefined")? window.pageXOffset : document.body.scrollLeft;
		var intYScroll = (typeof window.window.pageYOffset != "undefined")? window.window.pageYOffset : (document.documentElement && document.documentElement.scrollTop > 0)? document.documentElement.scrollTop : document.body.scrollTop;
		return [intWidth, intHeight, intXScroll, intYScroll];
	},

	closeSession : function (oEvent){
		this.removeEvent(window, "load", function(){GLT.init();}, false);
		GLT = null;
		delete GLT;
	},

	addEvent : function (oObject, strEvent, oFunction, bCapture){
		if(oObject){
			if(oObject.addEventListener){
				oObject.addEventListener(strEvent, oFunction, bCapture);
			}
			else if(window.attachEvent){
				oObject.attachEvent(("on" + strEvent), oFunction)
			}
		}
	},

	removeEvent : function (oObject, strEvent, oFunction, bCapture){
		if(oObject){
			if(oObject.removeEventListener){
				oObject.removeEventListener(strEvent, oFunction, false);
			}
			else if(window.detachEvent){
				oObject.detachEvent(("on" + strEvent), oFunction)
			}
		}
	}
};
// ---
GLT.addEvent(window, "load", function(){GLT.init();}, false);
// ---
// Utility functions
// ---
function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
	var oCurrent;
	var oAttribute;
	for(var i=0; i<arrElements.length; i++){
		oCurrent = arrElements[i];
		oAttribute = oCurrent.getAttribute && oCurrent.getAttribute(strAttributeName);
		if(typeof oAttribute == "string" && oAttribute.length > 0){
			if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
				arrReturnElements.push(oCurrent);
			}
		}
	}
	return arrReturnElements;
}
// ---
if(typeof Array.prototype.push != "function"){
	Array.prototype.push = ArrayPush;
	function ArrayPush(value){
		this[this.length] = value;
	}
}

CSS

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

.glt-elm{
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 150px;
 	color: #fff;
  font-family: Arial, sans-serif;
 	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);
}

Head

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


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

Body

Paste this code into the BODY section of your HTML document


<p>
Ma quande lingues coalesce, <span title="You can use spans also" style="color: blue;">lingue es plu</span> simplic regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>

<ul>
  <li><a href="http://www.webdeveloper.com/" title="Lorem ipsum dolor sit amet">Web Developer</a></li>
  <li><a href="http://www.javascriptsource.com/">JavaScript Source</a> [no title attribute]</li>
  <li><a href="http://www.webreference.com/" title="You can use a bit of <em>HTML formatting</em>. And a little  <strong>more HTML formatting.</strong> And even <span style='color: #FFE900;'>some CSS!</span> Ti del coalescent lingues.">WebReference.com</a></li>
</ul>

Other

Download the images using the URL below:

Download the images here

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

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details