JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

Tooltip Example
<br/>
<br/><br/><br/><br/>

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

CSS

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    white-space: nowrap;
    border-bottom: 1px dotted #777;
}

.tooltip-content {
    opacity: 0;
    visibility: hidden;     
    font: 12px Arial, Helvetica;
    text-align: center;
    border-color: #aaa #555 #555 #aaa;
    border-style: solid;
    border-width: 1px;
    width: 150px;
    padding: 15px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -76px;    
    background-color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));     
    box-shadow: 1px 1px 0 #555,
                2px 2px 0 #555,
                3px 3px 1px rgba(0, 0, 0, .3),
                0   1px 0   rgba(255,255,255, .5) inset;                    
    transition: bottom .2s ease, opacity .2s ease;                  
    }
    
.tooltip-content:after,
.tooltip-content:before {
    border-right: 16px solid transparent;
    border-top: 15px solid #fff;
    bottom: -15px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

.tooltip-content:before {
    border-right-width: 25px;
    border-top-color: #555;
    border-top-width: 15px;
    bottom: -15px;
}

.tooltip:hover .tooltip-content{
    opacity: 1;
    visibility: visible;
    bottom: 30px;       
}

JavaScript

/*Tooltip Example*/

$(document).ready(function(){
    $('[data-tooltip]').addClass('tooltip');
    $('.tooltip').each(function() {  
        $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');  
    });
    
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('.tooltip-content').css('visibility','visible');
          }).mouseout(function(){
            $(this).children('.tooltip-content').css('visibility','hidden');
          })
    }
});