Create a javascript ToolTip within 10 minutes for Asp.net page

Please visit my new Web Site WWW.Codedisplay.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.