JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" class=" js no-touch"><head><meta http-equiv="Content-Type" content="text/h progress-stripedtml; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="keywords" content="Designer Position">
<meta name="description" content="Designer Position">
<title>Designer Position</title>
<body id="theme-default">
<link href="http://logosmile.net/devito/content/cyan/assets/css/bootstrap.css" rel="stylesheet">
<div class="row-fluid">
<h4>Cantonese </h4> <div style="display:inline">
<label class="span4" for="slider">Reading</label>
<div class="span8">
<div class="progress progress-info" rel="tooltip" title="100%">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
</div>
<div style="display:inline">
<label class="span4" for="slider">Writing</label>
<div class="span8">
<div class="progress progress-danger" rel="tooltip" title="95%">
<div class="bar" style="width: 95%;"></div>
</div>
</div>
</div>
<div style="display:inline">
<label class="span4" for="slider">Listening</label>
...
JavaScript
$("[rel=tooltip]").tooltip();
$("[rel=popover]").popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});