Can anybody tell me how to disappear the popup on mouseout event.I tried but failed.It will show a tooltip/popup on mouseover event but is not going away on mouseout event. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <SCRIPT TYPE="text/javascript"> <!-- Xoffset=-60; // modify these values to ... Yoffset= 20; // change the popup position. var old,skn,iex=(document.all),yyy=-1000; var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all if (ns4) skn=document.infobox else if (ns6) skn=document.getElementById("infobox").style else if (ie4) skn=document.all.infobox.style if(ns4)document.captureEvents(Event.MOUSEMOVE); else{ skn.visibility="visible" skn.display="none" } document.onmousemove=get_mouse; function msgbox(msg,bak) { var content="<table width=300 border=1 bordorcolor=black cellpadding=2 cellspacing=0 "+ "bgcolor="+bak+"><tr align=left><td width=100%><font color=#404040 size=2><b><i>Pack Download Command</i></b></font><br><font color=#404040 size=1>Copy the following text into your clipboard and<br>once in the channel hit CTRL+V to paste it!</font></td></tr><tr align=left><td width=100%><font color=black size=2>"+msg+"</font></td></tr></table>"; yyy=Yoffset; if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"} if(ns6){document.getElementById("infobox").innerHTML=content;skn.display=''} if(ie4){document.all("infobox").innerHTML=content;skn.display=''} } function get_mouse(e){ var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft; skn.left=x+Xoffset; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; } function die(){ yyy=-1000; if(ns4){skn.visibility="hidden";} else if (ns6||ie4) skn.display="none" } //--> </SCRIPT> </head> <body> <DIV id="infobox">MOUSE HERE</DIV> <a href="http://some_link.htm" onmouseover="msgbox('Message Text Here','#E6E6BE')"; onmouseout="die()">Link Text</a> </body> </html> Code (markup):
It looks like you forget to add id="infobox" inside your table code. The style can be applied to HTML element.
Use this piece of code inside msgBox and die functions. Also make it a habit to end all your atatements with a semi-colon. Hope this helps.
Brother I have the html as below- <DIV id="infobox">TooTip Here</DIV> <p><a href="http://some_link.htm" onmouseover="msgbox('Message Text Here','#E6E6BE')"; onmouseout="die();">Come Here</a></p> Code (markup): And I used the code as you said but it didn't work, does it work in you browser? Is there any free ajax tooltip library that I can use? function msgbox(msg,bak) { var skn=""; if (ns4) skn=document.infobox; else if (ns6) skn=document.getElementById("infobox").style; else if (ie4) skn=document.all.infobox.style; var content="<table width=300 border=1 bordorcolor=black cellpadding=2 cellspacing=0 "+ "bgcolor="+bak+"><tr align=left><td width=100%><font color=#404040 size=2><b><i>Pack Download Command</i></b></font><br><font color=#404040 size=1>Copy the following text into your clipboard and<br>once in the channel hit CTRL+V to paste it!</font></td></tr><tr align=left><td width=100%><font color=black size=2>"+msg+"</font></td></tr></table>"; yyy=Yoffset; if(ns4){skn.document.write(content);skn.document.close();skn.style.visibility="visible"} if(ns6){document.getElementById("infobox").innerHTML=content;skn.display=''} if(ie4){document.all("infobox").innerHTML=content;skn.display=''} } function get_mouse(e){ var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft; skn.left=x+Xoffset; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; } function die(){ var skn=""; if (ns4) skn=document.infobox; else if (ns6) skn=document.getElementById("infobox").style; else if (ie4) skn=document.all.infobox.style; yyy=-1000; if(ns4){skn.style.visibility="hidden";} else if (ns6||ie4) skn.style.display="none" } Code (markup):
This seems to work, minus the archaic NN4 document.layers and IE document.all statements, plus a few other corrections. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> Xoffset=-60; // modify these values to ... Yoffset= 20; // change the popup position. var skn; var yyy=-1000; function init() { skn=document.getElementById("infobox").style; skn.visibility="hidden"; document.onmousemove=get_mouse; } function msgbox(msg,bak) { var content="<table width=300 border=1 bordercolor=black cellpadding=2 cellspacing=0 "+"bgcolor="+bak+"><tr align=left><td width=100%><font color=#404040 size=2><b><i>Pack Download Command</i></b></font><br><font color=#404040 size=1>Copy the following text into your clipboard and<br>once in the channel hit CTRL+V to paste it!</font></td></tr><tr align=left><td width=100%><font color=black size=2>"+msg+"</font></td></tr></table>"; yyy=Yoffset; document.getElementById("infobox").innerHTML=content; skn.visibility="visible"; } function get_mouse(e){ var x=(e)? e.pageX:window.event.x+document.body.scrollLeft; skn.left=(x+Xoffset)+"px"; var y=(e)? e.pageY:window.event.y+document.body.scrollTop; skn.top=(y+yyy)+"px"; } function die(){ yyy=-1000; skn.visibility="hidden"; } </script> </head> <body onload="init()"> <p>MOUSE HERE: <a href="#" onmouseover="msgbox('Message Text Here','#E6E6BE')" onmouseout="die()"> Link Text</a> </p> <div id="infobox"></div> </body> </html> Code (markup):
Thank u FilmFiddler, I tried your code but the result is still the same- the onmouseout event doesnt have any effect. I want to copy some text from the tooltip and after I m finished on some event the tooltip will be out.Here I can copy text from tooltip but no event takes place for the tooltip to disappear.
On second inspection, the original posted code has a few other problems, so it may not be worthwhile persisting with it. Perhaps some other pop-up tooltip scripts are worth trying instead. Like this one (still has some ie4/nn6 code, but still works OK): http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm Or this one, which is more modern: http://javascript.about.com/library/bltip1.htm
or not. stop using these archaic scripts, they are not cross modern browser compliant. the about.com one sends the toolip about 500px to the right of where it should be on my firefox... if you like the facebook style tooltips and have the mootools framework, you can use this function i wrote a while back (the old school facebook tooltips - dark grey with pointer arrow in the middle). it's configurable so you can disappear it on a custom event (default is mouseout on the trigger element): demo: http://fragged.org/dev/facebook_tooltips.php // extend element prototype Element.implement({ tooltip: function(message, options) { // a quick 'facebook' style tooltip // function version 2.2, 21/06/2009 20:04:16 if (!$type(message)) return false; if ($type(this.tipbody)== "element") this.tipbody.dispose(); var options = $merge({ eventStart: "mouseenter", eventEnd: "mouseleave", topOffset: 20, opacity: 1 }, options); var coords = this.getCoordinates(); this.tipbody = new Element("div", { styles: { background: "transparent url(/images/point_down.gif) no-repeat center bottom", float: "left", position: "absolute", left: 0, top: -100, opacity: options.opacity, height: 20 } }).adopt(new Element("div", { styles: { background: "#4c4c4c", color: "#ffffe5", padding: 0, "padding-top": 2, "line-height": 10, margin: 0, "padding-left": 9, "padding-right": 9, display: "block", "margin-left": "auto", "margin-right": "auto", overflow: "hidden", "font-size": "10px", "font-family": "verdana", float: "left", height: 13 }, html: message.replace(/ /g, " ") })).inject(document.body); this.addEvent(options.eventEnd, function() { if ($type(this.tipbody) == "element") { this.tipbody.dispose(); this.tipbody = null; this.removeEvent(options.eventEnd); } }.bind(this)); // var tipWidth = tipbody.getCoordinates(); var t = this.tipbody.getSize(); this.tipbody.setStyles({ left: coords.left + (coords.width / 2).round() - (t.x / 2).round(), top: coords.top - options.topOffset, width: t.x }); return this; } }); PHP: needs: http://fragged.org/images/point_down.gif -> example use etc - see demo page.
Now... if this tooltip could also be used on onfocus events (for input boxes and such) it would really be great
it can. eg: $("email").addEvents({ focus: function() { this.tooltip("Enter your email", {eventEnd: "blur"}); } }); PHP: this will show the tooltip whilst the input with id="email" is in focus and remove it on blur.