JavaScript

Simple tooltip using javascript and css?

The following code will generate the simple tooltip using Javascript and css. You can find the demo also.

 

The Javascript code :

<script language="javascript" type="text/javascript">
/* This tooltip library was created by Anil Kumar  */
function showtip(e,message)

{var x=0;

var y=0;

var m;

var h;

if(!e)
var e=window.event;

if(e.pageX||e.pageY) { x=e.pageX;  y=e.pageY;  }

else if(e.clientX||e.clientY)

{ x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}
m=document.getElementById('mktipmsg');

if((y>10)&&(y<450))

{  m.style.top=y-4+"px";  }

else{  m.style.top=y+4+"px";  }

var messageHeigth=(message.length/20)*10+25;

if((e.clientY+messageHeigth)>510)

{  m.style.top=y-messageHeigth+"px"; }
if(x<850) { m.style.left=x+20+"px";  }

else{  m.style.left=x-170+"px";  }

m.innerHTML=message;m.style.display="block";m.style.zIndex=203;

}

function hidetip(){

var m;

m=document.getElementById('mktipmsg');m.style.display="none";

}

</script>

The CSS Code:

<style type="text/css">

#mktipmsg {padding: 5px; background-color: #FFF8DC;  border: 1px solid #DEB887; width:180px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }
</style>
<a href="javascript:void(0)" onmouseover="showtip(event, 'Simple tooltip text');"
onmouseout="hidetip();">Hover your mouse here to see simple tooltip text.</a>

<div id="mktipmsg" ></div>

It will be useful …

13 thoughts on “Simple tooltip using javascript and css?”

  1. This code is not working, Kindly can you tell me what is problem, I am using this code:

    ToolTip

    .mktipmsg {padding: 5px; background-color: #FFF8DC; border: 1px solid #DEB887; width:180px;font-family: Arial,

    Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }

    function showtip(e,message){var x=0;var y=0;var m;var h;if(!e)
    var e=window.event;if(e.pageX||e.pageY){x=e.pageX;y=e.pageY;}
    else

    if(e.clientX||e.clientY){x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.s

    crollTop+document.documentElement.scrollTop;}
    m=document.getElementById(’mktipmsg’);if((y>10)&&(y510)
    {m.style.top=y-messageHeigth+”px”;}
    if(x<850){m.style.left=x+20+”px”;}
    else{m.style.left=x-170+”px”;}
    m.innerHTML=message;m.style.display=”block”;m.style.zIndex=203;}
    function hidetip(){var m;m=document.getElementById(’mktipmsg’);m.style.display=”none”;}

    Hover your mouse here to see simple tooltip text.

    Please help me in correcting this Script

  2. Tooltip

    /* This tooltip library was created by Anil Kumar */

    function showtip(e,message)

    {
    var x=0;

    var y=0;

    var m;

    var h;

    if(!e)
    {
    var e=window.event;
    }

    if(e.pageX || e.pageY) { x=e.pageX; y=e.pageY; }

    else if(e.clientX || e.clientY)
    {
    x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
    y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    }
    m=document.getElementById(‘mktipmsg’);

    if ((y>10)&&(y510)
    {
    m.style.top=y-messageHeigth+”px”;
    }
    if(x<850)
    {
    m.style.left=x+20+"px";
    }

    else
    {
    m.style.left=x-170+"px";
    }

    m.innerHTML=message;
    m.style.display="block";
    m.style.zIndex=203;

    }

    function hidetip(){

    var m;

    m=document.getElementById('mktipmsg');
    m.style.display="none";

    }

    #mktipmsg
    {
    padding: 5px;
    background-color: #FFF8DC;
    border: 1px solid #DEB887;
    width:180px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #6b6b6b;

    position:absolute;
    left:0px;
    top:0px;
    }

    Hover your mouse here to see simple tooltip text.

    Please help me, This Script is not working, i use your Script that you posted above, and i am using Mozilla FireFox 3.5….
    Waiting for your reply.
    Thanks

  3. Tooltip

    /* This tooltip library was created by Anil Kumar */

    function showtip(e,message)

    {
    var x=0;

    var y=0;

    var m;

    var h;

    if(!e)
    {
    var e=window.event;
    }

    if(e.pageX || e.pageY) { x=e.pageX; y=e.pageY; }

    else if(e.clientX || e.clientY)
    {
    x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
    y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    }
    m=document.getElementById(‘mktipmsg’);

    if ((y>10)&&(y510)
    {
    m.style.top=y-messageHeigth+”px”;
    }
    if(x<850)
    {
    m.style.left=x+20+"px";
    }

    else
    {
    m.style.left=x-170+"px";
    }

    m.innerHTML=message;
    m.style.display="block";
    m.style.zIndex=203;

    }

    function hidetip(){

    var m;

    m=document.getElementById('mktipmsg');
    m.style.display="none";

    }

    #mktipmsg
    {
    padding: 5px;
    background-color: #FFF8DC;
    border: 1px solid #DEB887;
    width:180px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #6b6b6b;

    position:absolute;
    left:0px;
    top:0px;
    }

    Hover your mouse here to see simple tooltip text.

    Please help me, This Script is not working, i use your Script that you posted above, and i am using Mozilla FireFox 3.5….
    Waiting for your reply…..
    Thanks

  4. Hi, Anil,

    Can you tell me how i can made this Tooltip moving with the Movement of Mouse,
    Please guide me in this work, Waiting for your response.
    Thanks

  5. Hi, i Just got the solution,

    The Solution is, Go to HTML part and change this line

    onmouseover=”showtip(event,’message’);”

    with below line

    onmousemove=”showtip(event,’message’);”

    You will get sliding Tooltip with the movement of your Mouse.

    Thanks

  6. Hello ANil,

    Whenever a text box gets a focus , a tooltip will be displayed at the RHS of the text box . I would like to know how to achieve that

    Please help me

  7. Hi,

    It’s very nice post yaar………. thank you so much………. it’s working really fantastic.. I implemented in my application…..

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.