Create a Javascript ToolTip onmouseover Event within 10 minutes for page C# VB.Net

Sometimes we need to create handy javascript tooltip for client in onmouseover Event. 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 to set the DIV visibility style to ‘visible’ otherwise ‘hidden’. Very simple right? Lets start:

Sample Output:

To Display a Tooltip Write Below Javascript Code:

    function DisplayToolTip() {
        document.getElementById('divToolTip').style.left = window.event.x;
        document.getElementById('divToolTip') = window.event.y;

        document.getElementById('divToolTip').style.visibility = 'visible';

To Hide a Tooltip Write Below Javascript Code:

    function HideToolTip() {
        document.getElementById('divToolTip').style.visibility = 'hidden';

To test the example Write the below HTML Markup:

<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>

Note: Please note that this script does not work for mozilla firefox but will work in Google Chrome, IE & Opera. To achieve that in the easiest way download built in jquery tooltip from the internet. This is only a faster development technique for IE developers.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code