Tool tip delay on mouseover

[mhodgson]

1) Script Title: Cool DHTML Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm

3) Describe problem: Just wondering if a "delay show" feature on mouseover can be incorporated into this tooltip?

[Twey]

Instead of using:

onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)";
onMouseout="hideddrivetip()"

Use:

onmouseover="this.finch = setTimeout(function() {ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300);}, 500);"
onmouseout="clearTimeout(this.finch);hideddrivetip();"

Change 500 to the delay (in milliseconds).

[mhodgson]

Works quite well thanks but I'm finding that whereas before the momment the curser was over the item the tooltip popped up. Now it doesn't and only pops up when the curser is moved slightly.

Not a huge problem but somewhat annoying.

[Twey]

Hm? The movement of the cursor has nothing to do with it, it's a timeout.

[mhodgson]

Odd I know but that is the effect- does not show unless the mouse is moved after being placed over the object.
Could be one of the other scripts is affecting it.

[jscheuer1]

You are not imagining things. The positioning of the tip - moving it from an invisible holding position to the visible position of the mouse pointer is event driven. The event is mouse motion (document.onmousemove). When the the timeout finally fires, the event that first triggered it has passed so, you need to make a new event by moving the mouse a little. There is a way to change this but, it is a bit more complex than what Twey has offered. If one of us gets the chance, we will let you know about it.

[jscheuer1]

OK, give this a shot (adding to Twey's changes, new stuff in red):

onmouseover="positiontip(event,1);this.finch = setTimeout(function() {ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300);}, 500);"

Then in the script, add the red parts:

function ddrivetip(thetext, thecolor, thewidth){
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
tipobj.style.visibility='visible';
return false
}
}

function positiontip(e){
if (enabletip||arguments[1]){
if(arguments[1])
tipobj.style.visibility='hidden';
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-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=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
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+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
if(!arguments[1])
tipobj.style.visibility="visible"
}
}

[mhodgson]

I knew I wasn't imagining it, thanks for the suggestion, tried it and now it works exactly as I wanted.
Just had to remembered to put the onMouseout event on the end of the line and it all does precisely what I was after.

Many thanks for the help.

Martin.

[johnnynine]

Does anyone have an updated delay fix for the more recent version of the popup code Cool DHTML tooltip script II? There have been a couple minor changes to the javascript and I'm having trouble getting the delay to work with it.

Thanks,
Johnny

[johnnynine]

bump