JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<img src="http://lh3.googleusercontent.com/-fpEZ39N6ca0/AAAAAAAAAAI/AAAAAAAAACw/3meT86GAjQg/s100/photo.jpg" data-tt="Avatarku :D"></img>

CSS

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    padding:7px 10px;
    color:#fff;
    font-size:12px Arial;
    box-shadow:0 1px 2px rgba(0, 0, 0, .5);
}

JavaScript

var t = $('img'),
    n = 'data-tt';

/*!
 * JQuery MyTooltip Plugin by Rifan Hidayat
 * https://plus.google.com/106954497205478697764
 * Licence: http://creativecommons.org/licenses/by-sa/3.0/
 */

(function (f) {
    t.hover(function () {
        var tp = t.attr(n);
        t.data('cd', tp).removeAttr(n);
        f('<span class="tooltip"></span>').text(tp).appendTo(document.body).fadeIn('slow');
    }, function () {
        t.attr(n, t.data('cd'));
        f('.tooltip').remove();
    }).mousemove(function (s) {
        var pagex = s.pageX + 20;
        var pagey = s.pageY + 10;
        f('.tooltip')
            .css({
            top: pagey,
            left: pagex
        })
    });
})(jQuery);