JSFiddle - React, Tailwind, and code Playground

Tooltip with notes

by iamacatperson

HTML

<div id="images">
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /><div class="tooltip">This is some tooltip! This is some tooltip! <em>This is some tooltip!</em> This is some tooltip! This is some tooltip!</div></li>
    <li><div class="tooltip">This is some tooltip!</div><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
    <li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
</div>
<div id="calc" class="tooltip">This is some text</div> <!-- needs to match the .tooltip style especially the font-size cause this will affect the width of this div -->

CSS

#images {
    margin-top: 100px;
}

#images li {
    list-style: none;
    margin-left: 10px;
    position: relative;
    float: left
}

.tooltip {
    color: #FFF;
    clear: both;
    float: none;
    width: auto;
    background: #000;
    padding: 10px;
    font: 11px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 5px;
    position: absolute;
    top: -60px;
    display: none;
    border: 2px solid #999;
}

JavaScript

$(".tooltip").each(function() {
    $("#calc").text($(this).text()); //matches the text inside .tooltip
    $(this).width($("#calc").width()); //gets .tooltip width based on #calc width (which matches the actual width of .tooltip (w/o the parent div constraint))
});
$('#images li').hover(function() {
    $(this).find('.tooltip').show();
}, function() {
    $('.tooltip').hide();
});