JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas rhoncus sagittis. Suspendisse potenti. In at lacus et sem pretium adipiscing tempor eget <a href="#" title="longer title">odio</a>. Vivamus sodales pretium eros, sit amet aliquet sem scelerisque ut. Maecenas congue odio ut velit cursus condimentum. Fusce quis tellus quis est commodo ultricies a nec arcu. Nullam vitae nisl purus. In non odio diam, id accumsan libero. Sed varius odio in nibh egestas at egestas justo faucibus. <a href="#" title="abcdef">Praesent non</a> purus in nulla sagittis ornare. Nulla rhoncus hendrerit tellus a fermentum. Suspendisse et mi eu turpis adipiscing sodales. Pellentesque venenatis nunc vel dolor accumsan euismod. Nulla volutpat lectus ac mi aliquam dictum.</p>

CSS

p {
    margin:2em;
    font-family:sans-serif;
}
.tooltip {
    background:rgba(0,0,0,.9);
    border-radius:10px;
    border:2px solid #FFF;
    color:#FFF;
    -webkit-box-shadow:0 0 0 1px rgba(0,0,0,.5);
    -moz-box-shadow:0 0 0 1px rgba(0,0,0,.5);
    box-shadow:0 0 0 1px rgba(0,0,0,.5);
    position:absolute;
    padding:10px;
    font-family:sans-serif;
}
.tooltip:before,
.tooltip:after {
    content:'';
    border-style:solid;
    border-width:6px 6px 0;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-6px;
}
.tooltip:before {
    border-color:rgba(0,0,0,.5) transparent transparent;
    margin-top:2px;
}
.tooltip:after {
    border-color:#FFF transparent transparent;
    margin-top:1px;
}

JavaScript

!function($){
    $(function(){
    
        $("a[title]").hover(function(e){
            var $this    = $(this),
                $tooltip = $("<div class=\"tooltip\">"),
                pos      = $this.position();
            
            $("body").append($tooltip);
            
            $tooltip.text($this.attr("title")).css({
              top: pos.top - $tooltip.outerHeight()-5,
              left: pos.left + ($this.outerWidth() - $tooltip.outerWidth())*.5
            });
            $this.removeAttr("title").data("tooltip", $tooltip);
            
        },function(e){
            var $this = $(this);
        
            $this.attr("title", $this.data("tooltip").text()).data("tooltip").remove();
        
        });
    
    });
}(jQuery);