Home > Style & Scripts > JavaScript > Simple tooltip using javascript and css?

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 Responses

  1. Shary

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

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

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

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

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

    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

Leave a Reply

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