JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<br>
<br>
<br>Browsers will automatically display a tooltip when you provide a title
attribute. Internet Explorer will also use the alt attribute. But, in this
tutorial I’m going to show you how to quickly write a
<a href="#" title="hover craft is here"
class="wt">Come ineside</a> Browsers will automatically display a tooltip
when you provide a title attribute. Internet Explorer will also use the
alt attribute. <a href="#" title="tipical piece of shit" class="wt">piece of shit</a> in
this tutorial I’m going to show you how to quickly write a
<div class="gop"></div>

CSS

.wt {
    position:relative;
}
.gop {
    position:absolute;
    z-index:100;
    display:table;
    display:none;
    top:20px;
    max-width:200px;
    min-width:100px;
    left:50%;
    background:silver;
    text-align:center;
}

JavaScript

$(document).ready(function () {
    
    $('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});
    
    //custom tooltips
    $("a.wt").hover(function () {
        $(this).append("<span class='gop'>" + $(this).data('title') + "</span>");
        $(this).find(".gop").show();
       },

    function () {
        $(".gop").hide();
    });
});