JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<img class='masterTooltip' title='Desc:<br>$xxx' id='xxx' width='50px' src='http://lorempixel.com/50/50/'/>
<img class='masterTooltip' title='Desc:<br>$xxx' id='xxx' width='50px' src='http://lorempixel.com/50/50/'/>
<img class='masterTooltip' title='Desc:<br>$xxx' id='xxx' width='50px' src='http://lorempixel.com/50/50/'/>

CSS

.masterTooltip
{
    cursor:pointer;
}

JavaScript

$(document).ready(function()
{
    $('.masterTooltip').hover(
            function()
            {
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .html(title)    // THIS WAS CHANGED
                .appendTo('body')
                .fadeIn('slow');
            }, 
            function()
            {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
            })
            .mousemove(function(e) 
            {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
            });
});