GM-University1405241492 0 Report post Posted July 15, 2005 Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and Javascript, so it gives us a much more wide range than my previous tutorials that just where on HTML.OK, so here we go...Put this right under <body> <div id="dhtmltooltip"></div><script type="text/javascript">var offsetxpoint=-60 //Customize x offset of tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (ie||ns6)var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}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=thecolortipobj.innerHTML=thetextenabletip=truereturn false}}function positiontip(e){if (enabletip){var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;//Find out how close the mouse is to the corner of the windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.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 positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.style.visibility="hidden"tipobj.style.left="-1000px"tipobj.style.backgroundColor=''tipobj.style.width=''}}document.onmousemove=positiontip</script> Put this with your CSS <style> tag, or .css file.#dhtmltooltip {position: absolute;width: 150px;border: 1px solid #C1C1C1;padding: 2px;background-color: #EFEFEF;color: #000000;visibility: hidden;z-index: 100;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);} And put this in your linkonMouseover="ddrivetip('Your tooltip text','black', 300)";onMouseout="hideddrivetip()"A link example would be<a href="http://forums.xisto.com/topic/98533-topic/?findpost=1064416057 text here','red', 300)";onMouseout="hideddrivetip()">Text Here</a> Share this post Link to post Share on other sites
AzNxSuperNova 0 Report post Posted July 15, 2005 I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful. Share this post Link to post Share on other sites
GM-University1405241492 0 Report post Posted July 16, 2005 I personally tried this tutorial and it was very straight forward. I was able to get the results and find that it can easily be customized to suit your needs through the CSS <style> tag. I also would like to point out that when I opened it in Internet Explorer, it was initially blocked with Internet Explorer saying that it was restricting the file from showing active content that could access your computer. However, I'm not sure if other browsers block it. Either way, it was a great tutorial and very helpful. <{POST_SNAPBACK}> Yeah, Internet Explorer does that with Javascript for me too, so that is why I only use FireFox now, thanks for the feedbakc. Share this post Link to post Share on other sites
Neverseen 0 Report post Posted July 17, 2005 very nice tutorial A lot of code ! hehe quite usefull and easy to understand thanks Share this post Link to post Share on other sites
Illudar 0 Report post Posted August 5, 2005 Nice tutorial. I like it a lok, easy to understand and helpful! Share this post Link to post Share on other sites
abhiram 0 Report post Posted August 5, 2005 Great tutorial. I'm going to use this in my site. Thanks a lot. Share this post Link to post Share on other sites
iGuest 3 Report post Posted March 6, 2008 thanks Creating Tooltips This is really nice, I have tried this for the image but its doesn't work? -reply by sudhir Share this post Link to post Share on other sites
naro2212 0 Report post Posted March 17, 2008 WoW i thought that was only possible for ads well TY dose it work with images and can you change the color of them Share this post Link to post Share on other sites
