Using javascript how to show tooltip while mouse over ?

sathian · #1 (**permalink**) 11-16-2007, 04:21 AM

I like to show some explanation pop up under cursor. any body tel me how can i do using javascript?

Thanks
Sathain

KiruthikaSambandam · #2 (**permalink**) 11-16-2007, 04:31 AM

Hi ,

Use following Code , This wil help you to show tooltip under curser.

<html>
<head>
<style type="text/css">

</style>

<script>
// position of the tooltip relative to the mouse in pixel //
var offsetx = 12;
var offsety = 8;

function newelement(newid)
{
if(document.createElement)
{
var el = document.createElement('div');
el.id = newid;
with(el.style)
{
display = 'none';
position = 'absolute';
}
el.innerHTML = ' ';
document.body.appendChild(el);
}
}
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function getmouseposition(e)
{
if(document.getElementById)
{
var iebody=(document.compatMode &&
document.compatMode != 'BackCompat') ?
document.documentElement : document.body;
pagex = (isapple == 1 ? 0

ie5)?iebody.scrollLeft:window.pageXOffset);
pagey = (isapple == 1 ? 0

ie5)?iebody.scrollTop:window.pageYOffset);
mousex = (ie5)?event.x

ns6)?clientX = e.clientX:false;
mousey = (ie5)?event.y

ns6)?clientY = e.clientY:false;

var lixlpixel_tooltip = document.getElementById('tooltip');
lixlpixel_tooltip.style.left = (mousex+pagex+offsetx) + 'px';
lixlpixel_tooltip.style.top = (mousey+pagey+offsety) + 'px';
}
}
function tooltip(tip)
{
if(!document.getElementById('tooltip')) newelement('tooltip');
var lixlpixel_tooltip = document.getElementById('tooltip');
lixlpixel_tooltip.innerHTML = tip;
lixlpixel_tooltip.style.display = 'block';
document.onmousemove = getmouseposition;
}
function exit()
{
document.getElementById('tooltip').style.display = 'none';
}
</script>
</head>
<body>
Show <span class="tip" style="border-bottom: 1px solid #eee;"
onmouseover="tooltip('here comes the explanation');"
onmouseout="exit();"><b>tooltip</b></span> Under cursor
</body>
</html>

thanx
KiruthikaSambandam

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Mouse Events	Pvinothkumar	HTML, CSS and Javascript Coding Techniques	10	10-18-2007 12:41 AM
Windows Forms Mouse Handling	Sundaram	C# Programming	3	09-25-2007 08:51 AM
Mouse event	varghese	HTML, CSS and Javascript Coding Techniques	1	09-18-2007 08:31 AM
How can I detect mouse events with Ctrl, Alt, and Shift keys?	kingmaker	HTML, CSS and Javascript Coding Techniques	1	08-10-2007 03:33 AM
Any idea about Background Slide show using javascript?	itbarota	HTML, CSS and Javascript Coding Techniques	1	07-26-2007 12:08 AM