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

 

The Javascript code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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:

1
2
3
4
<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>
1
2
3
4
<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 …


12 Comments

Shary · September 1, 2009 at 3:43 pm

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

Anil Kumar Panigrahi · September 1, 2009 at 4:27 pm

Try to write the javascript code line by line then we know that condition from where to where, there is problem of missing closing brackets in your script.

shary · September 4, 2009 at 3:14 pm

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

Anil Kumar Panigrahi · September 5, 2009 at 6:05 am

Write the below code

messageHeigth=-10;
if((y>10)&&(y<510))
{
m.style.top=y-messageHeigth+"px";
}
then we can get the tooltip text, i am also using firefox 3.5 only, it is working fine now.

see the live demo @ http://labs.anil2u.info/tooltip.php

Shary · September 5, 2009 at 9:10 am

Thanks,Anil, it working fine now.

Shary · September 6, 2009 at 2:21 pm

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

Anil Kumar Panigrahi · September 8, 2009 at 2:42 am

Hi Shary,

I am also not tried with that requirement.

shary · September 8, 2009 at 2:55 pm

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

Anil Kumar Panigrahi · September 9, 2009 at 5:44 am

Hi shary,

thanks you very much for your solution,

Prathap · December 21, 2009 at 1:48 pm

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

Anil Kumar Panigrahi · December 22, 2009 at 6:32 am

Hello Pratap,

If adjust the x and y positions then above code will works fine. Or once check the URL : http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx

gopi · March 23, 2010 at 11:24 am

Hi,

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

Leave a Reply

Avatar placeholder

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