JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link href="stylesheet.css" rel="stylesheet" />
<title>tooltip page</title></head>
<body>

<div id="pHolder">
    <div id="pText" ></div>
</div>

    <div id="content">
        <img src="lock.png" alt="locked"/>
        <img src="cart.png" alt="keep on shoppin"/>
        <img src="tv.png" alt="educational tv.."/>
        <div id="a" style="background-color:Green; width:100px; height:100px;">ello!</div>
    </div>
</body>
</html>

CSS

#content
{
 width: 300px;
 margin-left:auto;
 margin-right:auto;
 margin-top:100px;
    
}
#pText
{
    font-family: Verdana;
    font-size:12px;
    min-width:45px;
    min-height:10px;
    max-width:80px;
    padding: 5px;
    border:solid 1px #acacac;
    background-color:#141414;
    text-align:center;
    color:#c1c1c1;
}

#pHolder
{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    min-height:15px;
     text-align:center;
}

JavaScript

(function ($) {
    $.fn.poppin = function (options) {

        var settings = $.extend({
            'attribute': 'alt'
        }, options);

        return this.each(function () {
            $(this).on('mouseover', function () {
                var pop = $('#pHolder');
                $('#pText').text($(this).attr(settings.attribute));

                var t = $(this).offset().top - pop.height() - 10;

                var l = $(this).offset().left + Math.round($(this).outerWidth(true) / 2) - Math.round(pop.outerWidth(true) / 2);

                pop.show().css('top', t).css('left', l);
            });

            $(this).on('mouseout', function () {
                $('#pHolder').hide();
            });
        });

    };
})(jQuery);


    $(document).ready(function () {
        $('img').poppin();
        $('#a').poppin({'attribute': 'style'});
    });