JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="content">
    Lorem ipsum!<br />
    The quick brown fox jumped over the very, very lazy dog.<br />
    Now for some abbreviations:<br />
    <abbr title="Cascading Style Sheets">CSS</abbr>, <abbr title="Hyper Text Markup Language">HTML</abbr>,<abbr title="Asynchronous Javascript and XML"> AJAX</abbr>!
</div>

CSS

body {
    font-family:Calibri;
}
abbr {
    position:relative;
    border-bottom:1px dotted gray;
    cursor:help;
}
abbr:hover{
    border-bottom:1px dotted black;
}
abbr .desc {
    position:absolute;
    background-color:yellow;
    border:1px solid red;
    border-radius:5px;
    padding:5px;
    z-index:50;
    
    bottom: -5em;
}

JavaScript

$(document).ready(function(){
    var abbrTitle = "";
    
    $("abbr").hover(function(){
        abbrTitle = $(this).attr("title");
        $(this).removeAttr("title");
        $(this).css("cursor","default");        
        $(this).append('<span class="desc">'+abbrTitle+"</span>");
    }, function(){
        $(this).children().hide("fast",function(){
            $(this).children().remove();
        });
        $(this).attr("title",abbrTitle);
        $(this).css("cursor","help");
    });
});