JSFiddle - React, Tailwind, and code Playground

by r3wt

HTML

<figure class="box" tooltip-data="This is a tooltip">
    <img src="http://www.aklgamma.com/images/liboly/default_profile_image.png"/>
    <figcaption>aldfkalsdfjas</figcaption>
</figure>

CSS

.box { 
   height: 200px;width: 200px; float:left; border: 1px solid #000; margin: 0 auto;
}
.box figcaption { position: relative;top: -35px; opacity: .8; background: #222; color: #fff;padding: 5px; font-weight: bold; text-align: center;}
.box img { height: 100%; width: 100%;}
.tooltip {
    z-index: 99;
	position: relative;
    top: -15px;
	background: #221cd5;
    padding: 5px;
    font-color: #fff;
    font-weight: bold;
}
.tooltip:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(34, 28, 213, 0);
	border-bottom-color: #221cd5;
	border-width: 20px;
	margin-left: -20px;
}

JavaScript

$(function(){
    $('.box').hover(function(){
        var tooltip = $(this).attr('tooltip-data');
        $(this).append('<div class="tooltip">'+tooltip+'</div>');
    },
    function(){
        $('.tooltip').remove();
    });
});