JSFiddle - React, Tailwind, and code Playground

Animated Skill Bars & Title Key

HTML

<div class="contAll">
<h1>Animated Skill Graphs</h1>
<div class="skill-container">
    <ul>
        <li><a id="jquery" href="#" class="jquery tool-tip" title="Versed"></a></li>
        <li><a id="css3" href="#" class="css3 tool-tip" title="Proficient"></a></li>
        <li><a id="html5" href="#" class="html5 tool-tip" title="Proficient"></a></li>
        <li><a id="php" href="#" class="php tool-tip" title="Adept"></a></li>
        <li><a id="mysql" href="#" class="mysql tool-tip" title="Adept"></a></li>
    </ul>
</div>

<div class="skill-titles">
    <label class="jquery tool-tip" title="Versed">Jquery &amp; JS</label>
    <label class="css3 tool-tip" title="Proficient">CSS &amp; CSS3</label>
    <label class="html5 tool-tip" title="Proficient">HTML &amp; HTML5</label>
    <label class="php tool-tip" title="Adept">Php</label>
    <label class="mysql tool-tip" title="Adept">MySql</label>
</div>
    
    <p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>. Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a>.</p>
</div>

CSS

/* ========================================================
   Demo Styles
   ===================================================== */
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
    font-family: 'Yanone Kaffeesatz';
    background: #222 url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}

h1, h2 {
    display: block;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.4);
    text-decoration: none;
}
h1 { font-size: 46px; margin: 0 0 6px 0; text-align: center; }
h2 { font-size: 36px; margin: 10px 0 0 25px; }
h1:hover, h2:hover {
    color: rgba(255,255,255,0.2);
}
p {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding-top: 20px;
    clear: left;
}
a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
}
a:hover {
    color: rgba(255,255,255,0.3);
}
.contAll { width: 350px; margin: 20px auto; }

/* ========================================================
   Animated Skill Styles
   ===================================================== */
.skill-container {
    float: left;        
    width:200px;
    height:165px;
    border: 6px #444 solid;
    border-radius: 10px;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(17, 17, 17, 0.3)), color-stop(100%, rgba(68, 68, 68, 0.1)));
    background-image: -webkit-linear-gradient(top, rgba(17, 17, 17, 0.3), rgba(68, 68, 68, 0.1));
    background-image: -moz-linear-gradient(top, rgba(17, 17, 17, 0.3), rgba(68, 68, 68, 0.1));
    background-image: -ms-linear-gradient(top, rgba(17, 17, 17, 0.3), rgba(68, 68, 68, 0.1));
    background-image: -o-linear-gradient(top, rgba(17, 17, 17, 0.3), rgba(68, 68, 68, 0.1));
    background-image: linear-gradient(top, rgba(17, 17, 17, 0.3), rgba(68, 68, 68, 0.1));
}
.skill-container ul { margin:0; padding:0; list-style:none; }
.skill-container li { width:30px; height:165px; margin:0 5px;...

JavaScript

$(document).ready(function() {
    
    //skill Bar Animations
    $('#jquery').animate( { height: '75%' }, 2500);
    $('#css3').animate( { height: '90%' }, 2500);
    $('#html5').animate( { height: '95%' }, 2500);
    $('#php').animate( { height: '65%' }, 2500);
    $('#mysql').animate( { height: '30%' }, 2500);
    
    // Tooltip
    $('.tool-tip').hover(function(){
        // on Hover
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
    }, function() {
        // Hover out
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousey = e.pageY + 0;
        var mousex = e.pageX + -25;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });

});