I also noticed the following problems:
1- if you have an embedded iframe the tooltip will not draw properly ontop of the iframe.
2- if you use the onlick instead of the mouse over to call the tooltip , you will get a script error if you hover and dont click becuase the onmouseout will try to delete the tooltip when its not there.
I fixed those problems added 2 optional parameters to be passed to the function showTooltip(e,tooltipTxt,TooltipCustomMAXSize,TooltipCustomLocation)
Here is the updated code.
/**************************************
(C)
www.dhtmlgoodies.com, October 2005
This is a script from
www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
Updated: April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes.
www.dhtmlgoodies.com
Alf Magne Kalleland
Modified May 30, 2006 by Benjamin Krajmalnik to provide for dynamic relocation on tooltip when page is scrolled.
Tested on IE6. Mozilla, and Opera 8
************************************************************************************
Updated: Sept 2006, Custom Sizing, Custom Positioning
USAGE showTooltip(event,Message,OptionalZize,OptionalZizePosition)
Sample
"showTooltip(event,'Hi There');return false"
Sample2
"showTooltip(event,'Hi There',200,50);return false"
*****************************/
var dhtmlgoodies_tooltip = false;
var dhtmlgoodies_tooltipShadow = false;
var dhtmlgoodies_shadowSize = 1;
var dhtmlgoodies_tooltipMaxWidth2 = 200;
var dhtmlgoodies_tooltipMinWidth = 20;
var dhtmlgoodies_iframe = false;
var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
var Opptooltip_created = 0;
function showTooltip(e,tooltipTxt,TooltipCustomMAXSize,TooltipCustomLocation)
{ dhtmlgoodies_tooltipMaxWidth =0;
Opptooltip_created = 0;
var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;
var bodyHeight = document.body.clientHeight - 20;
if(!dhtmlgoodies_tooltip){
dhtmlgoodies_tooltip = document.createElement('DIV');
dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
dhtmlgoodies_tooltipShadow = document.createElement('DIV');
dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';
document.body.appendChild(dhtmlgoodies_tooltip);
document.body.appendChild(dhtmlgoodies_tooltipShadow);
if(tooltip_is_msie){
dhtmlgoodies_iframe = document.createElement('IFRAME');
dhtmlgoodies_iframe.frameborder='5';
dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
dhtmlgoodies_iframe.src = 'Blank.html';
dhtmlgoodies_iframe.style.zIndex = 100;
dhtmlgoodies_iframe.style.position = 'absolute';
document.body.appendChild(dhtmlgoodies_iframe);
}
}
dhtmlgoodies_tooltip.style.display='block';
dhtmlgoodies_tooltipShadow.style.display='block';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var st2 = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
if (e.pageX) {
leftPos = e.pageX + 10;
topPos2 = e.pageY + 10;
}
else if (e.clientX)
{
leftPos = e.clientX + 10 + st2;
topPos = e.clientY + 10 + st;
}
dhtmlgoodies_tooltip.style.width = null; // Reset style width if it's set
dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';
dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
dhtmlgoodies_tooltipShadow.style.top = topPos + dhtmlgoodies_shadowSize + 'px';
var tooltipWidth = tooltipTxt.length * 7;
if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;
/* check to see if a custom max size was passed*/
if (showTooltip.arguments.length >2)
{
dhtmlgoodies_tooltipMaxWidth= showTooltip.arguments[2]
}
else
{
dhtmlgoodies_tooltipMaxWidth=dhtmlgoodies_tooltipMaxWidth2
}
/* if nothing was passed then we will use the deault*/
if(tooltipWidth > dhtmlgoodies_tooltipMaxWidth){ /* Exceeding max width of tooltip ? */
tooltipWidth = dhtmlgoodies_tooltipMaxWidth ;
}
dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
var tooltipHeight = dhtmlgoodies_tooltip.offsetHeight;
dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
if((leftPos + tooltipWidth)>bodyWidth + st2){
leftPos = bodyWidth + st2 - (tooltipWidth+20);
}
if((topPos + tooltipHeight)>bodyHeight + st){
topPos = bodyHeight+st - (tooltipHeight+20);
}
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
/* check to see if a custom Position was passed*/
if (showTooltip.arguments.length >3)
{
OppMYPosition= showTooltip.arguments[3]
}
else
{
OppMYPosition=topPos
}
/* if nothing was passed then we will use Best choice best on screen*/
dhtmlgoodies_tooltip.style.top = OppMYPosition + 'px';
dhtmlgoodies_tooltipShadow.style.top = OppMYPosition+ dhtmlgoodies_shadowSize + 'px';
if(tooltip_is_msie){
dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
}
Opptooltip_created = 2 ;
setTimeout('hideTooltip()',5000);
}
function hideTooltip()
{ if (Opptooltip_created > 0)
{dhtmlgoodies_tooltip.style.display='none';
dhtmlgoodies_tooltipShadow.style.display='none';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none'; }
Opptooltip_created =0;
}
