Easy DHTML ToolTips

Dave Clark Feb 9, 2009

General

Provide additional information for your visitors. This script creates tooltips using links, spans and other tags. The CSS style can be set to match your own site. Easy to implement. Heavily commented script.

Using links for Easy DHTML ToolTips,
and using spans for Easy DHTML ToolTips.

Notes

Created by: Dave Clark
Web Site: http://www.DaveClarkConsulting.com
Posted: February 9, 2009

Source Code

Paste this source code into the designated areas.

External file

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

			/* This script and many more are available free online at
			The JavaScript Source!! http://www.javascriptsource.com
			Created by: Dave Clark | http://www.DaveClarkConsulting.comLicensed under: U.S. Copyright
			 */
			
			/*
			  Easy DHTML ToolTips * by Dave Clark I (a.k.a., MrNobody) * Copyright (c) 2009 * All Rights Reserved
			
			    Author: Dave Clark Consulting
			   Website: http://www.DaveClarkConsulting.com
			  Location: Terra Bella, CA, USA
			
			  Right to copy, use, and distribute (for free) granted as long as this header remains intact.
			
			  To use, link this JavaScript external library file at the end of your page's BODY section.
			  Then, just give your link, span, etc., a unique id and a special class value which
			  identifies that HTML element as having an associated tooltip.  The association is made
			  by giving the associated tooltip element an id which is a combination of the original
			  element's id and special class with an underscore character between them.  For example:
			  You have a word or phrase which should have a tooltip displayed.  You can wrap that word
			  or phrase in SPAN tags and give the SPAN tag an id of "span1" and use "tooltip" as the
			  special class value.  Then you would define a DIV whose content is to be the tooltip.
			  That DIV would be given an id of "span1_tooltip" in order to associate it with the SPAN.
			*/
			
			var MyEasyToolTips = new EasyToolTips('tooltip', 'MyEasyToolTips');
			
			function EasyToolTips(className, usrObjName)  { // Easy Tool Tips Constructor Function
			  var strict = document.documentElement && document.documentElement.scrollHeight && document.documentElement.scrollHeight > 0;
			  var toolid, dAttrs = (strict) ? document.documentElement : document.body;
			  GenEasyToolTips(document.links, this);
			  GenEasyToolTips(document.getElementsByTagName("SPAN"), this);
			
			  function GenEasyToolTips(list, output) {
			    var x, tip, len = list.length;          // find out how many items in list
			    for (x=0; x<len; ++x) {           // loop on document links to find tooltips
			      if(list[x].id                   // link must have an id
			      && list[x].id > " "                 // which is greater than blanks
			      && list[x].className                // and a class name
			      && list[x].className.indexOf(className) >= 0    // containing the specified class name
			      && (tip = document.getElementById(toolid=(list[x].id+"_"+className)))) {   // associated tool tip is link id + _className
			        output[toolid] = new EasyToolTip(list[x], tip); // generate an easy tool tip entry
			      }
			    }
			    output.show = function(tooltip, event) {      // generic tooltip show function
			      tooltip.style.display = "block";          // show tooltip
			      var tx = event.clientX + 10 + dAttrs.scrollLeft;  // initial tooltip x placement
			      var ty = event.clientY + 10 + dAttrs.scrollTop;   // initial tooltip y placement
			      var dx = dAttrs.clientWidth + dAttrs.scrollLeft;  // current document x max viewable
			      var dy = dAttrs.clientHeight + dAttrs.scrollTop;  // current document y max viewable
			      if (tx+tooltip.offsetWidth > dx) tx = dx - tooltip.offsetWidth;
			      if (ty+tooltip.offsetHeight > dy) ty = event.clientY - 5 - tooltip.offsetHeight + dAttrs.scrollTop;
			      tooltip.style.left = tx + "px";           // final tooltip x placement
			      tooltip.style.top = ty + "px";            // final tooltip y placement
			      event.cancelBubble = true;              // cancel event bubbling
			      return false;                   // skip any other event handling
			    }
			    output.hide = function(tooltip, event) {     // generic tooltip hide function
			      tooltip.style.display = "none";           // hide tooltip
			      event.cancelBubble = true;              // cancel event bubbling
			      return false;                   // skip any other event handling
			    }
			  }
			
			  function EasyToolTip(owner, tooltip) {       // generate an easy tool tip entry
			    tooltip.style.display = "none";             // start tooltip off as non-display
			    tooltip.style.position = "absolute";          // tooltip will be absolutely positioned
			    tooltip.style.zIndex = "+2";              // tooltip will float above document content
			    tooltip.style.left = "0px";               // start tooltip off at document left
			    tooltip.style.top = "0px";                // start tooltip off at document top
			
			    this.easytip = tooltip;                 // save a pointer to the tooltip
			    if (window.Event) {                  // if there is a static Event object then event-time event block is passed to handler
			      owner.onmouseover = new Function("event", "return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
			      owner.onmouseout = new Function("event", "return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
			    } else {         // else event-time event block is global
			      owner.onmouseover = new Function("return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
			      owner.onmouseout = new Function("return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
			    }
			  }
			}

CSS

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

			#link1_tooltip {
				position: relative;
				width: 150px;
				border: 2px solid black;
				padding: 5px 10px;
				color: black;
				font-weight: bold;
				background-color: red;
			}
			#span1_tooltip {
				position: relative;
				width: 200px;
				border: 2px solid blue;
				padding: 5px 10px;
				color: blue;
				font-weight: bold;
				background-color: yellow;
			}
			.fauxLink {
				color: blue;
				cursor: pointer;
				text-decoration: underline;
			}

Body Code

Paste this code into the BODY section of your HTML document, near the end, just above the closing BODY tag.

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

Body

Paste this code into the BODY section of your HTML document

			
			<p>Using <a id="link1" href="http://www.daveclarkconsulting.com/" class="tooltip">links</a> for Easy DHTML ToolTips,<br>
			and using <span id="span1" class="fauxLink tooltip">spans</span> for Easy DHTML ToolTips.</p>
			
			<div id="link1_tooltip">
			  <p>Link tooltip content...</p>
			  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
			</div>
			
			<div id="span1_tooltip">
			  <p>Span tooltip content...</p>
			  <p>Ma quande lingues coalesce, li grammatica del.</p>
			</div>

Leave a Response

(0 comments)

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