JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<table>
    <tr><td class="descriptive_class_name" title="1234">Other</td></tr>
    <tr><td class="descriptive_class_name" title="43210">text</td></tr>
    <tr><td class="descriptive_class_name" title="987">in</td></tr>
    <tr><td class="descriptive_class_name" title="2">here</td></tr>
</table>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<p>Stuff to force scroll</p>
<table>
    <tr><td class="descriptive_class_name" title="1234">Other</td></tr>
    <tr><td class="descriptive_class_name" title="43210">text</td></tr>
    <tr><td class="descriptive_class_name" title="987">in</td></tr>
    <tr><td class="descriptive_class_name" title="2">here</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;
    border: 1px solid black;
    background-color: #eee;
}

JavaScript

jQuery(function ($){

    var $els  = $('.descriptive_class_name');
    var $info = $('#more_information');
    
    $els.bind('mouseenter', showMoreInfo);
    $els.bind('mouseleave', hideMoreInfo);
    
    function showMoreInfo(ev)
    {
        var el    = ev.target;
        var value = el.title;
        var $el   = $(el);
        var pos   = $el.offset();
        var l_pad = 5;
        var t_pad = 0;
        var top   = ev.pageY + t_pad;
        var left  = ev.pageX + l_pad;
        
        $info.css({top: top, left: left});
        $info.text( value ).show();
    }

    function hideMoreInfo(ev)
    {
        $info.hide();
    }
});