JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tip" title="Testing this fantastic tooltip theme" style="margin-top: 50px; margin-left: 50px; height: 20px; width: 40px;">Test</div>

CSS

/* DEFAULT STYLES - Always load*/
.tip_top {
    padding-bottom: 5px;
}
.tip_bottom {
    padding-top: 5px;
}
.tip_right {
    padding-left: 5px;
}
.tip_left {
    padding-right: 5px;
}
.tip_top #tiptip_arrow_inner {
    margin-top: -7px;
    margin-left: -6px;
}
.tip_bottom #tiptip_arrow_inner {
    margin-top: -5px;
    margin-left: -6px;
}
.tip_right #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -5px;
}
.tip_left #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -7px;
}
#tiptip_arrow, #tiptip_arrow_inner {
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    height: 0;
    width: 0;
}
#tiptip_content {
    font-size: 11px;
    text-shadow: none;
    padding: 4px 8px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 3px #555;
    -webkit-box-shadow: 0 0 3px #555;
    -moz-box-shadow: 0 0 3px #555;
}
#tiptip_holder_grey {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

#tiptip_holder_grey.tip_top #tiptip_arrow_inner {
    border-top-color: #d7d7d7;
}
#tiptip_holder_grey.tip_right #tiptip_arrow_inner {
    border-right-color: #9d9d9d;
}
#tiptip_holder_grey.tip_left #tiptip_arrow_inner {
    border-left-color: #9d9d9d;
}
#tiptip_holder_grey.tip_bottom #tiptip_arrow_inner {
    border-bottom-color: #9d9d9d;
}

#tiptip_holder_grey.tip_top #tiptip_arrow {
    border-top-color: #000000;
}
#tiptip_holder_grey.tip_right #tiptip_arrow {
    border-right-color: #000000;
}
#tiptip_holder_grey.tip_left #tiptip_arrow {
    border-left-color: #000000;
}
#tiptip_holder_grey.tip_bottom #tiptip_arrow {
    border-bottom-color: #000000;
}

#tiptip_holder_grey #tiptip_content {
    background: #d7d7d7; /* Old browsers */
    background: -moz-linear-gradient(top, #d7d7d7 0%, #9d9d9d 38%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d7),...

JavaScript

/*
 * TipTip
 * Copyright 2010 Drew Wilson
 * www.drewwilson.com
 * code.drewwilson.com/entry/tiptip-jquery-plugin
 *
 * Version 1.3   -   Updated: Mar. 23, 2010
 *
 * This Plug-In will create a custom tooltip to replace the default
 * browser tooltip. It is extremely lightweight and very smart in
 * that it detects the edges of the browser window and will make sure
 * the tooltip stays within the current window size. As a result the
 * tooltip will adjust itself to be displayed above, below, to the left 
 * or to the right depending on what is necessary to stay within the
 * browser window. It is completely customizable as well via CSS.
 *
 * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

(function($){
    $.fn.tipTip = function(options) {
        var defaults = { 
            activation: "hover",
            tooltipClass: "bi-tooltip",
            keepAlive: false,
            maxWidth: "200px",
            edgeOffset: 3,
            defaultPosition: "bottom",
            delay: 200,
            fadeIn: 200,
            fadeOut: 200,
            attribute: "title",
            closeBtn: false,
            content: false, // HTML or String to fill TipTIp with
            theme: 'default', // New: choose theme, default is white, "black" is the black tooltips from close buttons in popups, "proposalteam" is used in proposal team tooltips
              enter: function(){},
              scroll: function(){},
              exit: function(){}
          };
         var opts = $.extend(defaults, options);
         
         // Setup tip tip elements and render them to the DOM
         if($('#tiptip_holder_' + opts.theme ).length <= 0){
             var tiptip_holder = $('<div id="tiptip_holder_' + opts.theme + '" style="max-width:'+ opts.maxWidth +';"></div>');
            var tiptip_content = $('<div id="tiptip_content"></div>');
         ...