jQuery Animated Skill Bars with Tool-Tip

Another Animated Skill Bar set, this one with an attractive Tool-Tip on mouse over.

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="skillbars">
    <h1>jQuery Animated Skill Bars</h1>
<p>HTML</p>
<div class="skillbar tool-tip" data-perc="100" title="HTML">
    <div class="bar skill-html"><span></span></div>
</div>
    
<p>CSS</p>
<div class="skillbar tool-tip" data-perc="90" title="CSS">
    <div class="bar skill-css"><span></span></div>
</div>
    
<p>jQuery</p>
    <div class="skillbar tool-tip" data-perc="70" title="jQuery/Javascript">
    <div class="bar skill-jquery"><span></span></div>
</div>
    
    <p>PHP/MySQL</p>
    <div class="skillbar tool-tip" data-perc="75" title="PHP/MySQL">
    <div class="bar skill-php-mysql"><span></span></div>
</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> for more Snippets.</p>
</div>

CSS

/* ========================================================
   Demo Styles
   ===================================================== */
body {
  color: #fff;
  margin: 20px;
  font-family: 'Yanone Kaffeesatz';
  font-size: 16px;
  font-weight: normal;
  background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}
h1 {
    display: block;
    margin: 0 0 20px 15px;
    font-size: 46px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.2);
    text-decoration: none;
}
h1:hover {
    color: rgba(255,255,255,0.3);
}
p {
    margin: 10px 0 4px 6px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 16px;
    color: rgba(255,255,255,0.4);
}
a {
    color: #f27011;
    text-decoration: none;
}
a:hover {
    color: #f63a0f;
}

/* ========================================================
   Animated Skill Bars
   ===================================================== */
.skillbars {
  width: 400px;
  margin: 0 auto;
}

.skillbar {
  font-family: 'Yanone Kaffeesatz';
  font-size: 14px;
  color: #111;
  width:100%;
  text-align: left;
  text-indent: 6px;
  position: relative;
  height: 16px;
  border-radius: 4px;
  border: 1px #111 solid;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.skillbar:before, .skillbar:after {
  content: '';
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}
.skillbar:before {
  bottom: 0;
  z-index: 2;
  border-radius: 4px 4px 0 0;
}
.skillbar:after {
 ...

JavaScript

$(function() {
    
    //Skills Bar Animation
    $('.skillbar').each(function(){
        var t = $(this),
        dataperc = t.attr('data-perc'),
        barperc = Math.round(dataperc*4.0);
        t.find('.bar').animate({width:barperc}, dataperc*25);
        
        function perc() {
            var length = t.find('.bar').css('width'),
            perc = Math.round(parseInt(length)/4.0),
            labelpos = (parseInt(length)-2);
            t.find('.perc').text(perc+'%');
        }
        perc();
        setInterval(perc, 0);
    });
    
    // Tooltip only Text
    $('.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 mousex = e.pageX + 20;
        var mousey = e.pageY + 10;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
        
});