JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<h2>Internal Comment Only</h2>
<table>
    <tr><td data-internal-comment-value="1234">Other</td></tr>
    <tr><td data-internal-comment-value="43210">text</td></tr>
    <tr><td data-internal-comment-value="987">in</td></tr>
    <tr><td data-internal-comment-value="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>
<h2>Invoice Comment Only</h2>
<table>
    <tr><td data-invoice-comment-value="1234">Other</td></tr>
    <tr><td data-invoice-comment-value="43210">text</td></tr>
    <tr><td data-invoice-comment-value="987">in</td></tr>
    <tr><td data-invoice-comment-value="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>
<h2>BOTH Invoice and Internal Comment</h2>
<table>
    <tr><td data-internal-comment-value="1234" data-invoice-comment-value="1234">Other</td></tr>
    <tr><td data-internal-comment-value="5" data-invoice-comment-value="43210">text</td></tr>
    <tr><td data-internal-comment-value="982" data-invoice-comment-value="987">in</td></tr>
    <tr><td data-internal-comment-value="asdfasdfs" data-invoice-comment-value="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>

<!-- 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;
}

td.comment { 
    /* if you wanted to style the comment rows */
}

span.comment {
    font-weight: bold;
}

span.notice {
    font-weight: bold;
    color: red;
}

JavaScript

jQuery(function ($){

    var $tables = $('table');
    var $info = $('#more_information');
    var types = {
        internal: {
            attr: 'data-internal-comment-value',
            prefix: '<span class="comment">Internal Comment:</span><br/>'
        },
        invoice: {
            attr: 'data-invoice-comment-value',
            prefix: '<span class="notice">Notice:</span><br/>'
        }
    };
    
    // apply the behaviors
    for (var type in types){
        var sel = selector( type );
        $tables.delegate(sel, 'mouseenter', showMoreInfo);
        $tables.delegate(sel, 'mouseleave', hideMoreInfo);
    }

    // functions used by the script
    function selector( type ){ 
        return '['+ types[type].attr + ']'; 
    }
    
    function showMoreInfo(ev)
    {
        var el     = ev.target;        // the DOM element
        var $el    = $(el);            // jQuery object
        var el_xy  = $el.offset();     // ex: {top: 10, left: 200}
        var mouseX = ev.pageX;         // ex: 10
        var mouseY = ev.pageY;         // ex: 200
        var l_pad  = 5;                // additional padding (left)
        var t_pad  = 0;                // additional padding (top)
        var top    = mouseY + t_pad;   // vertical setting
        var left   = mouseX + l_pad;   // horizontal setting
        var msgs   = [];               // array messages

        for (var type in types){
            var obj      = types[ type ];
            var has_attr = jQuery(el).is(selector(type));

            if (has_attr){
                var value  = el.getAttribute( obj.attr );
                var prefix = obj.prefix;
                var msg    = prefix+' '+value;
                msgs.push( msg );
            }
        }

        $info.css({top: top, left: left}); // move it        
        $info.html( msgs.join('<br/>') );  // set the value
        $info.show();                      // show it
    }

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