JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <h3>setTimeout</h3>
<button class="like-button" title="Algum texto">Like</button>
<button class="like-button" title="Outro texto">Another Like</button>
<button class="like-button" title="Ainda outro texto?">Cool</button>
</div>


<div class="wrapperToo">
    <h3>setInterval</h3>
<button class="botao-gosto" title="Algum texto">Like</button>
<button class="botao-gosto" title="Outro texto">Another Like</button>
<button class="botao-gosto" title="Ainda outro texto?">Cool</button>
</div>

CSS

.wrapper {
    background-color: #A1BEE6;
    padding: 5px 20px;
}
.wrapperToo {
    background-color: #F4F37A;
    padding: 5px 20px;
}
h3 {
  background-color: #fff;
  padding: 5px;
}

.like-button {
    margin-bottom: 20px;
    display: block;
}
.botao-gosto {
    margin-bottom: 20px;
    display: block;
}

/* toolstip plugin */
.tipsy { font-size: 12px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 150px; padding: 5px 8px 4px 8px; text-align: center; }

/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }


.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

JavaScript

// ###########################################
// CĂłdigo relevante no final desta TAB
// ###########################################


!function(t){function i(t,i){return"function"==typeof t?t.call(i):t}function e(t){for(;t=t.parentNode;)if(t==document)return!0;return!1}function s(i,e){this.$element=t(i),this.options=e,this.enabled=!0,this.fixTitle()}s.prototype={show:function(){var e=this.getTitle();if(e&&this.enabled){var s=this.tip();s.find(".tipsy-inner")[this.options.html?"html":"text"](e),s[0].className="tipsy",s.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).prependTo(document.body);var n,o=t.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight}),l=s[0].offsetWidth,a=s[0].offsetHeight,f=i(this.options.gravity,this.$element[0]);switch(f.charAt(0)){case"n":n={top:o.top+o.height+this.options.offset,left:o.left+o.width/2-l/2};break;case"s":n={top:o.top-a-this.options.offset,left:o.left+o.width/2-l/2};break;case"e":n={top:o.top+o.height/2-a/2,left:o.left-l-this.options.offset};break;case"w":n={top:o.top+o.height/2-a/2,left:o.left+o.width+this.options.offset}}2==f.length&&("w"==f.charAt(1)?n.left=o.left+o.width/2-15:n.left=o.left+o.width/2-l+15),s.css(n).addClass("tipsy-"+f),s.find(".tipsy-arrow")[0].className="tipsy-arrow tipsy-arrow-"+f.charAt(0),this.options.className&&s.addClass(i(this.options.className,this.$element[0])),this.options.fade?s.stop().css({opacity:0,display:"block",visibility:"visible"}).animate({opacity:this.options.opacity}):s.css({visibility:"visible",opacity:this.options.opacity})}},hide:function(){this.options.fade?this.tip().stop().fadeOut(function(){t(this).remove()}):this.tip().remove()},fixTitle:function(){var t=this.$element;(t.attr("title")||"string"!=typeof t.attr("original-title"))&&t.attr("original-title",t.attr("title")||"").removeAttr("title")},getTitle:function(){var t,i=this.$element,e=this.options;this.fixTitle();var t,e=this.options;return"string"==typeof...