JSFiddle - React, Tailwind, and code Playground

by Suraj Raj Shrestha

HTML

<table class="tblBar">
    <tbody>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
        </tr>
    </tbody>
</table>

<div class="toolTips" style="display:none;">
    <span></span>
</div>

CSS

.tblBar{
    border: 1px solid brown;
}

.tblBar th{
    background-color: green;    
}

.tblBar td{
    background-color: yellowgreen;
}

    .tblBar:hover {
        cursor: pointer;
    }

    div.toolTips {
        position: relative;
        display: inline;
    }

    div.toolTips span {
        position: absolute;
        width:150px;
        color: #000000;
        background: #c4f4ff;
        border-radius: 15px;
        box-shadow: 4px 4px 5px #ABA57D;
        padding: 15px;
    }

    div.toolTips span:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -8px;
        width: 0; height: 0;
        border-right: 8px solid #C4F4FF;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
        
    .tblBar:hover.toolTips span {
        opacity: 0.9;
        margin-top: -50px;
        margin-left: 15px;
    }

        .tblNotification{
			width: 100%;
            font-size: 11px;
		}
	
		.tblNotification th{
		    padding-top: 5px;
		}
		
		.tblNotification td:first-child{
			text-align: left;
		    font-weight: bold;
		}
		
		.tblNotification td:first-child+td{
			text-align: right;
			color: green;
		}
		
	
		tr.bar td{
			border-top: 1px solid grey;
		}

        .negativeIsRed {
            color: red !important;
        }

JavaScript

$(document).ready(function(){
    var position;
    var el = $("div.toolTips");
    

    
    $('table.tblBar').bind({
        mouseover: function(){
            position = $(this).offset();
            var left = position.left;
            $(el).find('span').html(
                        '<table class="tblNotification" cellspacing="0">' +       
                        '<thead><tr><th colspan="2">Header</th></tr></thead>' +
                        '<tbody>' +
                        '<tr><td>In Stock</td><td> ' + 15 + '</td></tr>' +
                        '<tr><td>Pens Count:</td><td>' + 10 + '</td></tr>' +
                        '<tr><td>Pencils Count:</td><td>' + 10 + '</td></tr>' +
                        '<tr class="bar"><td>Total Occupied:</td><td>' + 20 + '</td></tr>' +
                        '<tr><td>Available:</td><td id="checkNegative">' + -5 + '</td></tr></tbody></table>');
            
            $(el).css({
                        "position": "absolute",
                        display: "block",
                        "left": left + 36,
                        "top": position.top - 10
                    });
                $("td#checkNegative").addClass("negativeIsRed");
        }                       
    });
});