lixlpixel Javascript tooltips

Move your mouse over the underlined words since all that is CSS
you can style them however you want
to see some explanation pop up under your cursor.

This script uses javascript to trigger the display of a pop-up tooltip on mouseover you can assign the tooltip to any element of your page and then keeps the tooltip stuck to the mouse.

If you don't care about non-standard aware browsers yes, unfortunately
Internet Explorer for Windows
is among them
and want to have
non-javascript or want to offer tooltips
to people with javascript turned off
tooltips, have a look at the pure CSS tooltips CSS tooltips
which work with clean semantic code
and the :hover pseudoclass
.

the HTML markup

copy this and paste it into your code
some text with a <span class="tip"
onmouseover="tooltip('here comes the explanation');"
onmouseout="exit();">tooltip</span> to pop up

CSS used

this should go into your stylesheet
#tooltip {
    padding: 3px;
    background: #f9f9f9;
    border: 1px solid #eee;
    text-align: center;
    font-size: smaller;
}

span.tip {
    border-bottom: 1px solid #eee;
}

the Javascript

copy this script and include it in your page
// 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 = '&nbsp;';
        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';
}