PDA

View Full Version : Tool tip delay on mouseover



mhodgson
04-16-2007, 08:12 PM
1) Script Title: Cool DHTML Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

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

Twey
04-16-2007, 08:35 PM
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
04-17-2007, 08:48 AM
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
04-17-2007, 05:20 PM
Hm? The movement of the cursor has nothing to do with it, it's a timeout.

mhodgson
04-23-2007, 09:40 AM
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
04-23-2007, 02:40 PM
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
04-23-2007, 03:08 PM
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
04-23-2007, 07:36 PM
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
10-27-2008, 11:46 PM
Does anyone have an updated delay fix for the more recent version of the popup code Cool DHTML tooltip script II (http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm)? 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
11-14-2008, 01:14 AM
bump :)

jscheuer1
11-14-2008, 03:22 AM
Does anyone have an updated delay fix for the more recent version of the popup code Cool DHTML tooltip script II (http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm)? There have been a couple minor changes to the javascript and I'm having trouble getting the delay to work with it.

Thanks,
Johnny


bump :)

Please start a new thread for a new question.