JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<table>
<tr><td onmouseover="displayValue(1234);">1234</td></tr>
<tr><td onmouseover="displayValue(43210);">43210</td></tr>
<tr><td onmouseover="displayValue(987);">987</td></tr>
<tr><td onmouseover="displayValue(2);">2</td></tr>
</table>

<!-- display: none hides -->
<!-- hide this by default -->
<div id="more_information" style="display: none"></div>

CSS

#more_information {
    position: absolute;
    padding: 10px;
}

JavaScript

var more_info_id = 'more_information';

function displayValue(val){ 
    
    var element = document.getElementById( more_info_id ),
        e = window.event,
        pos = findPosition( e.target ),
        pos_left = pos[0],
        pos_top = pos[1],
        message = val;
    
    console.log(element, val, e, pos_top, pos_left);
    element.innerHTML = message;
    element.style.display = 'block';

    element.style.top = pos_top;
    element.style.left = pos_left;
    console.log(element);
}

function findPosition( element )
{
    var curleft = 0,
        curtop = 0;
    console.log('pos of', element);
    if (element.offsetParent) {
        console.log('oP', element.offsetParent, element.offsetLeft, element.offsetTop);
        do {
            curleft += element.offsetLeft;
            curtop += element.offsetTop;
            console.log(curleft, curtop);
        } while (element = element.offsetParent);
    }

    return [curleft, curtop];    

}