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.
Code:
<!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>
Junior Coders
Cool DHTML Tooltip II delay popup
Posting Permissions
Reply With Quote
Bookmarks