tooltip.tt

• Back
• Raw format

<script type="text/javascript">

var TooltipObj, Box;
var TooltipOffset = [8, 6];
var clientXY      = [-0, -0];

function showTip(obj) {

    /// init
    if(!TooltipObj || !TooltipObj.parentNode) {
        TooltipObj  = document.createElement('DIV');
        var TextObj = document.createTextNode(obj.title || 'No title');
        obj.title   = "";

        TooltipObj.appendChild(TextObj);
        TooltipObj.style.background = '#cccccc';
        TooltipObj.style.color      = '#000000';
        TooltipObj.style.position   = 'absolute';
        TooltipObj.style.border     = '1px solid #000000';
        TooltipObj.style.padding    = '0.4em';
        TooltipObj.style.MozOpacity = '0.8';
        TooltipObj.style.filter     = 'Alpha(Opacity=80)';
        TooltipObj.style.zIndex     = '20';

        document.getElementsByTagName('BODY').item(0).appendChild(TooltipObj);
    }
    else {
        obj.title = TooltipObj.firstChild.nodeValue;
        TooltipObj.parentNode.removeChild(TooltipObj);
    }
}

function mousemove(e) {
    if(e) event = e;

    clientXY = [ event.clientX, event.clientY ];

    if(TooltipObj) {
        TooltipObj.style.left = clientXY[0] + TooltipOffset[0] + "px";
        TooltipObj.style.top  = clientXY[1] + TooltipOffset[1] + "px";
    }

    if(Box) {
        document.title = Box;
        Box.style.left = clientXY[0] - Box.mx + Box.Left + "px";
        Box.style.top  = clientXY[1] - Box.my + Box.Top  + "px";
    }
}

function movebox(e, action) {
    
    /// init
    if(!e) e = window.event;
    var obj = e.sourceElement || e.target;

    if(action) {
        // obj.style.width  = obj.offsetWidth  + "px";
        // obj.style.height = obj.offsetHeight + "px";
        obj.Left         = obj.offsetLeft;
        obj.Top          = obj.offsetTop;
        obj.mx           = clientXY[0];
        obj.my           = clientXY[1];
        Box              = obj;
        Box.style.position = 'absolute';
    }
    else {
        Box = 0;
    }
}

document.onmousemove = mousemove;
document.onmousedown = function (e) { movebox(e, 1) };
document.onmouseup   = function (e) { movebox(e, 0) };
</script>

<h2>Tooltip hack with JavaScript</h2>
<div style="
    background: #990000;
    padding: 1em;
    margin: 1em;
    border: 3px solid #000000;
    cursor: default;"
    onmouseover="showTip(this)"
    onmouseout="showTip(this)
" title="This is the fancy tooltip :)">Hover mouse here</div>