Tooltip Extra - Javascript - Web Dev. - Neils Resource Web

Home	Back	Travel Web		Resource Web		Miscellaneous
Summary	General	Photo	Technical	Web Dev	Workshop

Contract Menu | Expand Menu

Summary of Content

This Script creates an 'enhanced' tooltip. It might be a bit top heavy on code but the effect is worth it. The example below is encapsulated in a DIV tag which means the tip is active for the whole line that contains the sentence, the only problem is when the tip moves too far to the right edge of the page it currently fails to reverse the arrow head, in fact the arrow head disappears. As a hyperlink is not required for its operation it could be used as 'additional information' for a topic. Try it out on the example and the headings below. Get the code for this script here or copy from below.

A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.

(div) The tooltip will be active for this whole sentence.(/div)

This is the image for the pointer part of the tooltip. I've made it in various colours in order to match the choice of border colour for the rest of the tooltip.

Style declaration (HEAD SECTION)

<style>

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid navy;
padding: 2px;
background-color: lightyellow;
font-family: arial, verdana, Helvetica, sans-serif;
font-size:11pt;
color: navy;
text-align:center;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXI
mageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>

The script (HEAD SECTION)

<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="../../../images/arrow3.gif">') //write out pointer image
(a coloured pointer of your choice)
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

Body Section

<div onMouseover="ddrivetip('Your Tooltip Here', 150)"; onMouseout="hideddrivetip()">
Your text that activates the tooltip</div>

Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)

Double mouse click anywhere on the page to take you back to the top (except when over the links)

Last Update: 04/03/2008 - Enhance Tooltip - Javascript - Neils Resource Web