JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="www.google.fr">aaaaaaaaaaezaezaezaeaaaaaaaaaaezaezaezaeaaaaaaaaaaezaezaezae</a>
<br>
<a href="www.google.fr">aaaaaaaaaaezaezaezaeaaaaaaaaaaezaezaezaeaaaaaaaaaaezaezaezae</a>

CSS

.infoBubble {
    z-index:100;
    font-family:arial;
    font-size:12px;
    color:#FFFFFF;
    display: inline-block;
    position: absolute;
    padding:6px;
    background:#000;
    background:-moz-linear-gradient(#000, #000);
    background:-o-linear-gradient(#000, #000);
    background:linear-gradient(#000, #000);
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    box-shadow: 1px 1px 3px black;
}
.infoBubble:after {
    z-index:100;
    content:"";
    position:absolute;
    bottom:-6px;
    left:20px;
    border-width:6px 6px 0;
    border-style:solid;
    border-color:#000 transparent;
    display:block;
    width:0;
}

JavaScript

infoBubble = function (el) {
    $('body').append('<div class="infoBubble"></div>');
    var bubble = $('.infoBubble:last');
    var posTop = el.offset().top - el.height() - 12;
    var posLeft = el.offset().left + el.width() / 2 - bubble.width() / 2;
    bubble.hide().css({
        'left': posLeft,
        'top': posTop - 10,
        'background-color': 'rgba(0, 0, 0, 0)',
        'opacity': 1
    });

    setTimeout(function () {
        bubble.show().html('eeeeeeeeee');
        bubble.animate({
            'top': posTop,
            'background-color': 'rgba(0, 0, 0, 0.7)'
        }, 200);
    }, 400);

}

infoBubbleStop = function () {
    var bubble = $('.infoBubble:last');
    bubble.stop().animate({
        'opacity': 0
    }, 200, 'linear', function () {
        bubble.remove();
    });
}

$(document).on('mouseenter', 'a', function () {
    console.log(this);
    infoBubble($(this));
}).on('mouseout', function () {
    infoBubbleStop();
});