JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" title="Fallback tooltip" data-tooltip="Some &lt;i&gt;helpful&lt;/i&gt; text.">Test</a>

CSS

#tooltip {
    position: absolute;
    
    background: rgb(250, 250, 250);
    border: 1px solid rgb(200, 200, 200);
    
    padding: 5px;
}

JavaScript

$('[title][data-tooltip]').each(function() {
    $(this).removeAttr('title');
}).hover(function() {
    var $this = $(this);
    
    $('<div />', {
        'id': 'tooltip',
        'html': $this.data('tooltip')
    }).offset({
        'left': $this.width() + 10,
        'top': $this.height() + 10
    }).appendTo('body');
}, function() {
    $('#tooltip').remove();
});