Please visit my new Web Site https://coderstechzone.com
Sometimes we need to create handy javascript tooltip for client. Here in this article i will show how one can create a javascript tooltip within very short time by using DIV object. To do that here i use a DIV as a tooltip container. When i need to show the tooltip then i have set the DIV visibility style to 'visible' otherwise 'hidden'. Very simple right? Lets start:
Add an Aspx page in your project. Then add the below javascript method:
function DisplayToolTip() { document.getElementById('divToolTip').style.left = window.event.x; document.getElementById('divToolTip').style.top = window.event.y; document.getElementById('divToolTip').style.visibility = 'visible'; } function HideToolTip() { document.getElementById('divToolTip').style.visibility = 'hidden'; }
Now add the below HTML markup code:
<span id="spanName" style="font-weight: bold;border: solid 2px red;" onmouseover="javascript:DisplayToolTip();" onmouseout="javascript:HideToolTip();">THIS IS THE SPAN</span> <div id="divToolTip" style="position: absolute; visibility: hidden; z-index: 20; background-color: white; border: solid 1px Blue;">This is ToolTip Text</div>
Now run the page hope you will get desired output:
Please note that this script does not run into mozilla firefox but will work in IE & Opera as well. To do that in easy way download built in jquery tooltip which is available in the internet. This is only a faster development technique for IE developers.
2 comments:
Thanks for the code we are Outsourced product development firm. I have personally applied this on my web page and it really works.
Really a nice tutorial, I would love to try it. Thanks for sharing
James Williams from TechGlobeX
I WOULD BE DELIGHTED TO HEAR FROM YOU