JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<table border="1" width="400">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td> <span class="showDiv">Drink</span>

            <div class="toolTip">
                <ul>
                    <li>Coffee</li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul>
            </div>
        </td>
        <td> <span class="showDiv">Friuts</span>

            <div class="toolTip">
                <ul>
                    <li>Banana</li>
                    <li>Water Melon</li>
                    <li>Lychee</li>
                </ul>
            </div>
        </td>
    </tr>
    <tr>
        <td> <span class="showDiv">Movies</span>

            <div class="toolTip">
                <ul>
                    <li>Avatar</li>
                    <li>Star War</li>
                    <li>Titanic</li>
                </ul>
            </div>
        </td>
        <td> <span class="showDiv">Books</span>

            <div class="toolTip">
                <ul>
                    <li>Novel</li>
                    <li>History</li>
                    <li>Design</li>
                </ul>
            </div>
        </td>
    </tr>
</table>

CSS

.toolTip
{
    font-family:Arial;
    font-size:13px;
    
    display:none;
    z-index:999;
    position: absolute;
    background-color:#333;
    padding:4px;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}
table { 
    font-family:Calibri;
    font-size:14px;

}

JavaScript

(function ($) {
    $.fn.autoposition = function (ref, opt) {
        var _this = $(this);
        var position = function (_tip, _ref, opt) {
            var o = $.extend({
                "topallowance": 0,
                    "leftallowance": 0
            }, o || opt);

            var _window = $(window);
            var _widthOfWindow = _window.width();
            var _widthDifferenceFromXaxisOfRef = _widthOfWindow - _ref.offset().left;
            var _xAdjustmentOftipWhenExceedAtLeftSide = ((_tip.outerWidth() > _widthDifferenceFromXaxisOfRef) ? (_tip.outerWidth() - _widthDifferenceFromXaxisOfRef) + o.leftallowance : 0);
            var _leftOfTheTip = _ref.offset().left - _xAdjustmentOftipWhenExceedAtLeftSide;

            var _heightOfWindow = _window.outerHeight();
            var _heightDifferenceFromYaxisOfRef = _heightOfWindow - (_ref.offset().top + _ref.outerHeight());
            var _topOfTheTip = (_tip.outerHeight() > _heightDifferenceFromYaxisOfRef) ? (_ref.offset().top - _tip.outerHeight()) - o.topallowance : (_heightOfWindow - _heightDifferenceFromYaxisOfRef) + o.topallowance;
            _tip.css('position', 'absolute')
                .css('top', _topOfTheTip)
                .css('left', _leftOfTheTip);
        };
        position(_this, ref, opt);
        $(window).bind('resize', function () {
            position(_this, ref, opt);
        });
    };
})(jQuery);
$(function () {
    $(".toolTip").autoposition($(".showDiv"));  
});