JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<a href="" disabled="disabled" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut harum aliquam delectus nam vel excepturi error voluptatibus accusantium tempora labore voluptates omnis ipsa cupiditate. Sapiente explicabo possimus commodi quos cum." class="tooltip">Hello</a>

CSS

.tooltip{
    position:relative;
    margin:200px;
    display:block;
}
span{
    position:absolute;
    bottom:0;
    left:0;
    background-color:red;
    margin-bottom:20px;
    padding:10px;   
}
[disabled]{
    cursor: not-allowed;
    opacity: 0.65;
}

JavaScript

// Tooltip
jQuery('.tooltip').hover(function(e) {
        e.preventDefault();
        var tip = jQuery(this).prop('title');
        jQuery(this).prop('title', '');
        jQuery(this).append('<span class="tooltip-body">'+ tip +'</span>');
    }, function() {
        var tip = jQuery(this).find('span.tooltip-body').text();
        jQuery(this).find('span').remove();
        jQuery(this).prop('title', tip);
    });