JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://xozblog.ru/demo/jquery-tool-tip/tipTip.css">
<br>

<br>
<div class="botpage2 botpage">
<a>TOOLTIP YAY1!</a>
</div>
    <br>
<div class="botpage3 botpage">
<a>TOOLTIP YAY2!</a>
</div>
        
            <br>
<div class="botpage3 botpage">
<a>TOOLTIP YAY3!</a>
</div>
                <br><br>
                <button class="show">Показать подсказки</button>

JavaScript

(function(a){a.fn.tipTip=function(c){var f={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:6,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},afterEnter:function(){},exit:function(){},afterExit:function(){},cssClass:""};if(a("#tiptip_holder").length<=0){var b=a('<div id="tiptip_holder"></div>');var d=a('<div id="tiptip_content"></div>');var e=a('<div id="tiptip_arrow"></div>');a("body").append(b.html(d).prepend(e.html('<div id="tiptip_arrow_inner"></div>')))}else{var b=a("#tiptip_holder");var d=a("#tiptip_content");var e=a("#tiptip_arrow")}return this.each(function(){var k=a(this),j=k.data("tipTip"),h=j&&j.options||a.extend(f,c),g={holder:b,content:d,arrow:e,options:h};if(j){switch(c){case"show":m();break;case"hide":l();break;case"destroy":k.unbind(".tipTip").removeData("tipTip");break}}else{var i=false;k.data("tipTip",{options:h});if(h.activation=="hover"){k.bind("mouseenter.tipTip",function(){m()}).bind("mouseleave.tipTip",function(){if(!h.keepAlive){l()}else{b.one("mouseleave.tipTip",function(){l()})}})}else{if(h.activation=="focus"){k.bind("focus.tipTip",function(){m()}).bind("blur.tipTip",function(){l()})}else{if(h.activation=="click"){k.bind("click.tipTip",function(n){n.preventDefault();m();return false}).bind("mouseleave.tipTip",function(){if(!h.keepAlive){l()}else{b.one("mouseleave.tipTip",function(){l()})}})}else{if(h.activation=="manual"){}}}}}function m(){if(h.enter.call(k,g)===false){return}var r;if(h.content){r=a.isFunction(h.content)?h.content.call(k,g):h.content}else{r=h.content=k.attr(h.attribute);k.removeAttr(h.attribute)}if(!r){return}d.html(r);b.hide().removeAttr("class").css({margin:"0px","max-width":h.maxWidth});if(h.cssClass){b.addClass(h.cssClass)}e.removeAttr("style");var...