Here’s a very basic example of how to code up an animated progress bar with tooltip using the Tipsy tooltip plugin.
The Code
Below we have the two lines of code which read the attribute ‘title’ and animate the progress bar. We then activate the tooltip plugin using the tipsy plugin.$("document").ready(function (){
// animate the progress bar onload var percent = $('.progress_bar').attr('title'); $('.progress_bar').animate({width: percent},1000); // activate tooltip $('.tip').tipsy({gravity: 's',fade: true}); });
The HTML
Very simple. Just one line of code with two div elements. Both the tooltip and the animation javascript read the ‘title’ attribute.<div class="progress_container"><div class="progress_bar tip" title="78%"></div></div>The CSS
body{ padding:50px; font-size:11px; font-family:Arial, Helvetica, sans-serif;} .progress_container{ padding:1px; width:195px; height:9px; overflow:hidden; background:url(progress_container.png); } .progress_bar{ height:9px; width:0px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:url(progress_bar.png); } /*-----------------------------------------------------------------------------------*/ /*Tipsy Tooltip style /*-----------------------------------------------------------------------------------*/ .tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; } .tipsy-inner { padding: 6px 8px 6px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; } .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; } .tipsy-ne .tipsy-arrow { top: 0; right: 10px; } .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; } .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; } .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }The article source:http://papermashup.com/build-a-simple-animated-progress-bar-with-tooltip/