JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a title="TITLE 3" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
</ul>

CSS

ul.portfolio { padding:30px 0 0 0; }
ul.portfolio li { float:left; width:100px; height:100px; margin:0 20px 20px; }
.port-window { position:relative; display:block; width:100px; height:101px; cursor:pointer; }
.port-window a { display:block; width:100px; height:100px; background:red; }

.port-window a #tooltip { background:#e0e0e0; background:rgba(0,0,0,0.05); padding:2px 5px; border:1px dashed #c7c7c7; border:1px dashed rgba(0,0,0,0.15); border-radius:6px; color:#3f3f3f; display:none; text-align:center; }

JavaScript

$('.port-window a').hover(function() {
            var tip = $(this).prop('title');
            $(this).prop('title','');
            $(this).append("<div id='tooltip'>"+ tip +"</div>");
            $("#tooltip")
                .css("position","relative")
                .css("z-index","999")
                .fadeIn("slow");
    console.log('hi !');
        }, function() {
            $(this).prop('title',$('#tooltip').html());
            $(this).children('div#tooltip').remove();
        });