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