JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<ul class="portfolio">
    <li>
        <div class="port-window">
            <a data-title="TITLE 1" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-title="TITLE 2" href="#">
                <img src="images/img.jpg" width="100" height="100" />
            </a>
        </div>
    </li>
    <li>
        <div class="port-window">
            <a data-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() {
    $("<div id='tooltip' style='display: none; position: relative; z-index: 999;' >" +
            $(this).data('title') + "</div>")
        .insertAfter(this)
        .fadeIn("slow");
}, function() {
    $('#tooltip').remove();
});