PDA

View Full Version : Cool DHTML Tooltip II delay popup



vince144
04-13-2006, 03:40 AM
1st Love the script. My question is can I somehow set how long the tip can be over the link before it pops up and can I also set how long the popup will be shown

e.g. I move mouse over link but the tip isn't shown until 2 secs later, then my mouse is over the link for another 4 seconds before the timer kicks in and hides the tooltip again.

The second part is not really needed but would like a way to the delay of the tooltip. Can anyone help?

Any help greatly appreciated.

Vince.

jscheuer1
04-13-2006, 03:45 PM
OK, I changed the syntax a little as well, making it simpler and allowing non-javascript enabled browsers to see your tip as an ordinary title attribute (this may allow spiders to see the tips). See example syntax in the code below, the apostrophe (') no longer needs to be escaped.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Cool DHTML tooltip script II w/delays - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

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

</style>
</head>
<body>
<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
* Modified for optional initial and disappear delays plus
* switched to element title as source of tip and
* simplified usage syntax by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var delay=1.25 //Set delay in seconds before tip appears (use 0 for no delay)
var hidedelay=2.5 //Set delay in seconds after tip appears that it disappears (use 0 for tip remains until mouseout)

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="arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false, showtip=false, nondefaultpos=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 obscuretip(){
showtip=false;
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
}

function ddrivetip2(thewidth, thecolor){
if (ns6||ie){
if (thewidth!="missing") tipobj.style.width=thewidth+"px"
if (thecolor!="missing") tipobj.style.backgroundColor=thecolor
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
showtip=true
return false
}
}

function ddrivetip(obj, thewidth, thecolor){
if (ns6||ie){
obj.onmouseout=function(){hideddrivetip(this)};
enabletip=true
tipobj.title=obj.title
tipobj.innerHTML=obj.title
obj.title=''
var thewidth=typeof thewidth!="undefined"? thewidth : 'missing'
var thecolor=typeof thecolor!="undefined" && thecolor!=""? thecolor : 'missing'
obj.tovar=setTimeout("ddrivetip2('"+thewidth+"', '"+thecolor+"')", delay*1000)
obj.hidevar=hidedelay? setTimeout("obscuretip()", [delay+hidedelay]*1000) : ''
}
}

function positiontip(e){
if (enabletip){
nondefaultpos=false
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 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"
}
if (showtip){
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}
}

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

document.onmousemove=positiontip

</script>
<span title="JavaScriptKit.com JavaScript tutorials" onmouseover="ddrivetip(this, 250);">Hi</span><br>
<span title="Tip w/color" onmouseover="ddrivetip(this, 75, 'pink');">Bye</span><br>
<span title="Yet Another Tip - using all the defaults" onmouseover="ddrivetip(this);">And</span><br>
</body>
</html>

Roje
04-14-2006, 01:13 AM
Thank you jscheuer1!

Your script is already in action on my MOW site (http://mowlog.50webs.com/)

jscheuer1
04-14-2006, 03:01 AM
Cool! However, as this is still basically a DD script:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.

Another part of the usage terms states that the credit also be displayed in the page's code. So, where you have:


<script type="text/javascript" src="another.js"></script>

Please make it:


<script type="text/javascript" src="another.js">

/***********************************************
* 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
* Modified for optional initial and disappear delays plus
* switched to element title as source of tip and
* simplified usage syntax by jscheuer1 in http://www.dynamicdrive.com/forums
* Additionally modified for personal use by Roje
***********************************************/

</script>

vince144
04-14-2006, 03:08 AM
thanks alot John, appreciate it...

vince144
04-14-2006, 03:14 AM
actually have another ? I am going to need to implement my page on the safari browser does anyone see a problem with this script will it work and if not can it downgrade nicely

jscheuer1
04-14-2006, 03:37 AM
The original script isn't rated for Safari. However, it is a pretty basic script in many respects and should fly OK in Safari. I (and most folks in this forum, including ddadmin) do not have a Mac to test on. I'd be happy to try and trouble shoot it in Safari - if there is a problem and if you could provide me with screenshots and error messages relevant to the problem(s), if any.

vince144
04-14-2006, 03:56 AM
cool thanks appreciate all the help will give it shot and if any trouble will take u up on your offer :)

djr33
04-14-2006, 06:09 AM
Works just fine in Safari v.1, as far as I can tell... (2 sec delay included)

Roje
04-14-2006, 09:07 AM
Works just fine in Safari
But not so in my Netscape 7... Only the standard (and shortened) tooltips appear.

Any browser: Sometimes the script side tooltips stay empty, even though there is title text aivailable.

Btw copyright copied to my html as well. Deemed it to be adequate in the .js file.

jscheuer1
04-14-2006, 01:50 PM
But not so in my Netscape 7... Only the standard (and shortened) tooltips appear.

Any browser: Sometimes the script side tooltips stay empty, even though there is title text aivailable.

Btw copyright copied to my html as well. Deemed it to be adequate in the .js file.

About the copyright - just happens to be the DD policy and personally, I like having my part visible too, thanks.

About NS7. This script is supposed to be in the body. I made a local copy of your http://mowlog.50webs.com/ page and then moved the script call block to here:


</head>
<body>
<script type="text/javascript" src="another.js">
/***********************************************
* 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
* Modified for optional initial and disappear delays plus
* switched to element title as source of tip and
* simplified usage syntax by jscheuer1 in http://www.dynamicdrive.com/forums
* Additionally modified for personal use by Roje
***********************************************/
</script>

<h1>MOWlog Maintenance-of-Way Resource</h1>

and it then worked in NS7.

About tips stay empty - I have yet to be able to duplicate this problem. Can you provide more specific circumstances than "sometimes"?

Roje
04-16-2006, 07:58 AM
http://people.freenet.de/roje/empty.jpg

Looks like this and seems to appear now and then. But it may well be that I have changed the code in a faulty way. And as you can see I have removed the little graphics completely by now (too much of a good thing). And you're right, moving the Script from head to body makes it work in NS7 too, thanks again! :)

jscheuer1
04-16-2006, 09:09 AM
Looks like this and seems to appear now and then. But it may well be that I have changed the code in a faulty way.

You've removed these lines (red) from:


function ddrivetip2(thewidth, thecolor){
if (ns6||ie){
if (thewidth!="missing") tipobj.style.width=thewidth+"px"
if (thecolor!="missing") tipobj.style.backgroundColor=thecolor
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
showtip=true
return false
}
}

I see you are not using the pointer so, that's cool but, you should probably leave it like so:


function ddrivetip2(thewidth, thecolor){
if (ns6||ie){
if (thewidth!="missing") tipobj.style.width=thewidth+"px"
if (thecolor!="missing") tipobj.style.backgroundColor=thecolor
tipobj.style.visibility="visible"
showtip=true
return false
}
}

Snipe656
03-31-2008, 08:49 PM
I know this is an old thread but I tried taking the script in this thread and replacing the current script that I have which I believe is directly off the website. Upon trying to test things in FireFox my tooltips would say "undefined" and not display the table that I normally show. Also noticed the tip would follow my cursor some even though I was well out of the area that would display the tip. This is on an intranet so I can not really post the exact thing I am doing however I could exchange a link via email/PMs to an example page.