JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />
<a href="#" class="tooltip" title="This is is my tooltip">hover me</a><br />

CSS

.tooltip_style{ position: absolute; margin: 0; padding: 3px 7px; z-index: 6;
    background: white; border: 1px solid #CACACA; -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .1);
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .1); }
.tooltip_style span{ font-size: 1.2em; }
.tooltip_arrow{
    position: absolute; width: 10px; height: 10px; display: block; background: url("/resources/img/pluggins/avatarMenu_arrow.png");
    bottom: -8px; left: 3px; background-position: 0 -30px;
}

JavaScript

(function ($) {


    $.fn.tooltip = function (options) {

        var selector = $(this).selector;
        var defaults = {
            fadeInSpeed:350,
            fadeOutSpeed:200,
            delayIn: 350,
            delayOut: 300,
            popupId:'tooltip_popup',
            verticalOffset: 30
        };
        var settings = $.extend({}, defaults, options);

        $(document).delegate(selector, 'mouseenter', function (e) {
            var $this = $(this);
            var title = $this.attr('title');
            $this.attr('title', '');


            if (title !== '') {
                if ($('#' + settings.popupId).text() === '') {
                    $('<div />').attr('id', settings.popupId)
                        .appendTo('body')
                        .css({
                            position:'absolute',
                            backgroudColor: 'black',
                            zIndex: 5
                        })
                        .addClass('tooltip_style')
                        .hide();
                    $('<div />').appendTo('#' + settings.popupId).addClass('tooltip_arrow');
                    $('<span />').appendTo('#' + settings.popupId);
                } else {
                    $('#' + settings.popupId).hide().stop(true,true).hide();
                }

                var ele_x = $this.offset().left;
                var ele_y = $this.offset().top;

                $('#' + settings.popupId+' span').text(title);

                $('#' + settings.popupId)
                    .css({
                        top : ele_y - settings.verticalOffset,
                        left: ele_x
                    })
                    .delay(settings.delayIn)
                    .fadeIn(settings.fadeInSpeed);
            }

        });

        $(document).delegate(selector, 'mouseleave', function (e) {
            var $this = $(this);

            $('#' + settings.popupId)
                .delay(settings.delayOut)
               ...