Cross Browser Compatible Tooltip Position Script

Cross browser Tool tip positioning script.(Intermediate skill)

The implementation uses a single div and positions the div relative to the mouse click event. The div also has re-size and re-position functionality. This is a plug and play script but you will need to write additional scripts to display information within the tooltip. Will publish a script tutorial for that shortly.

THE CODE BLOCKS

Javascript Code Block

//Browser flag - "0" if non IE, "1" if IE
var browser=0;
// Native Screen Resolution
var width;
var height;
// Browser(window) size
var b_width;
var b_height;
// Page Main Container size
var o_width;
var o_height;
// Scroll values
var scrollx;
var scrolly;
// Mouse Position
var msex;
var msey;
// Offset values(if your page container is center alligned)
var offsetx;
var offsety;
// Tooltip position and specs
var ttx;
var tty;
var ttheight;
var ttwidth;
var ttcontent_width;
var ttcontent_height;

function tooltip_postion(evt)
{
var e = (window.event) ? window.event : evt;
if(navigator.userAgent.indexOf("MSIE 7")!=-1)
{
browser=1;
}
else if(navigator.userAgent.indexOf("MSIE 6")!=-1)
{
browser=3;
}
else{abrowser =0;}
document.getElementById('tt').style.display='block';
//Reset Tooltip height
document.getElementById('tt').style.height='auto';
document.getElementById('tt_content').style.height='auto';
//Get all dependent parameters
ttheight = document.getElementById('tt').clientHeight;
ttwidth = document.getElementById('tt').clientWidth;
ttcontent_width = document.getElementById('tt_content').clientWidth;
ttcontent_height = document.getElementById('tt_content').clientHeight;
width = screen.width;
height = screen.height;
if(browser == 1 || browser == 3)
{
b_width = document.documentElement.clientWidth;
b_height = document.documentElement.clientHeight;
scrollx=document.documentElement.scrollLeft;
scrolly=document.documentElement.scrollTop;
msex = event.clientX;
msey = event.clientY;
}
else
{
b_width = window.innerWidth;
b_height = window.innerHeight;
scrollx=window.pageXOffset;
scrolly=window.pageYOffset;
msex = e.clientX;
msey = e.clientY;
}
o_width = document.getElementById('outerDiv').clientWidth;
o_height = document.getElementById('outerDiv').clientHeight;
//Calculate offsets
offsetx=(b_width-o_width)/2;
offsety=height-b_height;
if(offsetx <0) offsetx ="0;"> 0)
{
ttx = ttx + scrollx;
}
ttx = msex-offsetx;
// If tooltip exceeds Page container. restrict to page container limit.
if(ttx > (o_width-ttwidth))
{
ttx = o_width-ttwidth;
}
tty = msey+scrolly;
var ttendpty;//Total height after including tooltip - Used to compensate any excessive div spillover beyond page container.
var ttresize=0;// Tooltip resize flag - used to determine vertical positioning, auto resize or no change to tooltip height.
ttendpty = tty+ttheight;// calculate tooltip end point.
if(tty > (o_height-ttheight))
{
var ttoverflowy;// Tooltip spillover value
var newheight;// Tooltip auto resize height
ttoverflowy = ttendpty-o_height;
newheight = tty-o_height;
newheight = Math.abs(newheight);
if ( newheight > 150)// Autoresize setting - it is currently set to 150px, Resizing will occur if value is more than 150px else it will re-position
{ttresize=2;}// Set flag for resize
else
{ttresize=1;}// Set flag for re-position
}
//Fix for IE6, since IE6 does not recognize max-height and min-height CSS attributes, the script forces scroll by setting the height. The parameter 200 is from the CSS definition. 235 is a value that includes the overall tooltip size, this value is also manual input and needs to be calculated and keyed in.NOTE IF YOU CANGE THE DEFINITON FOR tt_content AND tt CLASSES, YOU WILL HAVE MANUALLY FEED THAT VALUEs HERE.1:33 PM 8/7/2008
if(browser == 3)
{
if(ttcontent_height>200)
{
document.getElementById('tt_content').style.height=200;
ttheight=235;
}
}
if(ttresize == 1)
{
//Move the tooltip above the point of click. the new tooltip positon is appended by compensating with the tooltip height. The value 10 is just to compensate the link's font size.Not a major parameter but you can set it.
if( browser == 3){tty = tty-ttheight-10;}
else {tty = tty-ttheight-10;}
}
if(ttresize == 2)
{
//Auto resize the tooltip. The tooltip will resize to the Newheight value. The value 50 is used to compensate for the footer height.
if(browser == 1){document.getElementById('tt').style.height=newheight-50;document.getElementById('tt_content').style.height=newheight-70;}
else {document.getElementById('tt').style.height=newheight-50+'px';document.getElementById('tt_content').style.height=newheight-70+'px';}
}
//Position the tooltip
if (browser ==1)
{
document.getElementById('tt').style.top=tty;
document.getElementById('tt').style.left=ttx;
}
else
{
document.getElementById('tt').style.top=tty+'px';
document.getElementById('tt').style.left=ttx+'px';
}
//TO DEBUG AND VIEW ALL PARAMETERS UNCOMMENT THE CODE BELOW
//alert("Browser Flag = "+browser+"\n\nScreen Resolution\n"+width+"x"+height+"\n\nBrowser Resolution\n"+b_width+"x"+b_height+"\n\nOuterDiv Size\n"+o_width+"x"+o_height+"\n\nOffsets\n"+offsetx+"x"+offsety+"\n\nClick Event\n"+msex+"x"+msey+"\n\n\nTooltip position\n"+ttx+"x"+tty+"\n\n\nScroll Values\n"+scrollx+"x"+scrolly+"\n\nTooltip dimensions\n"+ttheight+"x"+ttwidth+"\n\nTooltip Content dimensions\n"+ttcontent_height+"x"+ttcontent_width+"\n\nDiv Over Flow ="+ttoverflowy+"\n\nNew Tooltip height ="+newheight+"\n\nResize flag ="+ttresize);
}

CSS Classes

#tt
{
background:#FFFFCC;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
border:#000066 1px solid;
float:left;
position:absolute;
width:250px;
min-height:20px;
max-height:250px;
display:none;
top:0px;
left:0px;
z-index:3;
padding:5px;
}

#tt_content
{
clear:both;
width:245px;
max-height:200px;
overflow:auto;
border:1px solid #CCCCCC;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
color:#333333;
padding:2px;
}

HTML Code

<div id="tt">Div Title
<div style=" float:right; position:relative;"><a href="#" onclick="document.getElementById('tt').style.display='none';return false;">close [x]</a></div>
<div id="tt_content">Pull in any information you need into the div to display in the tooltip. You must format the content you feed the tooltip before you send it.</div>
</div>

INSTRUCTIONS
1- Copy the 3 blocks of code onto your editor.
2- Insert the HTML code inside the Main Page container in the page body.

Eg:- "<body><div class="Outterdiv"><div id="tt">.....</div></body>"

3- Copy the CSS styles to your external style-sheet or embed within the page head.
4- Copy the Javascript(JS) to your external JS or embed within the page head.
5- Create a regular hyperlink.
6- Add an onclick event : onclick="tooltip_postion(event);return false;". Your link should look like <a href="#" onclick="tooltip_postion(event);return false;">Tooltip</a>

Once you have completed this, the link onclick should open the tooltip.

You will need to write a script that feeds the information into the tooltip. This script is only to position and re-size the tooltip.