JSFiddle - React, Tailwind, and code Playground

by denzdii

HTML

<h2>Arahkan Mouse anda pada tulisan di bawah</h2>
    
    <ol>
        <li>
            <b data-tooltip="Action Role-Playing">Dark Souls</b>
        </li>
        <li>
            <b data-tooltip="Sci-Fi Shooter">Gears of War 3</b>
        </li>
        <li>
            <b data-tooltip="Role-Playing">The Elder Scrolls V: Skyrim</b>
        </li>
        <li>
            <b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>
        </li>
        <li>
            <b data-tooltip="Soccer Sim">FIFA Soccer 12</b>
        </li>
        <li>
            <b data-tooltip="Rally / Offroad Racing">DiRT 3</b>
        </li>
        <li>
            <b data-tooltip="Adventure">L.A. Noire</b>
        </li>
        <li>
            <b data-tooltip="3D Platformer">Outland</b>
        </li>
        <li>
            <b data-tooltip="Action Role-Playing">Portal 2</b>
        </li>
        <li>
            <b data-tooltip="Beat-'Em-Up">The Dishwasher: Vampire Smile</b>
        </li>            
    </ol>

CSS

html {
        background: #eaeaea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABpCAMAAAAOXP0IAAAAElBMVEXv7+/8/Pzm5uby8vL4+Pjr6+s8Y2RHAAAAiUlEQVR42u3ZMQrAMAgFUJPo/a/csQRKoRSEljc4OJhAHp8MRsQYPRVzrXlWzq3PtfW1tr6ezMZ4c9aT2b6b+l6PEydOnO6dsio7ipM8ceLE6ftOfb8GJ3nixInTH5wqszqKkzxx4sTp+059vwYneeLEiZO9hr2GPHHixMlew15Dnjhx4sTpavYAfp9zffLSX1UAAAAASUVORK5CYII=);
    }
    
    body {
        background: #eee;
        background: rgba(0,0,0,.05);
        border: 4px solid #fff;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;        
        font: small 'trebuchet MS', Arial, Helvetica;
        margin: 30px auto 0 auto;
        padding: 20px;
        width: 400px;
    }    
    
    ol {
        margin: 0;
        *margin-left: 20px;
        padding: 0;
        list-style: decimal-leading-zero inside;
    }
    
    ol li {
        margin: 20px 0;
    }
    
    .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: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
       ...

JavaScript

$(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');
                  })
        }
});