"bootsrapt progress-bar with tooltip"
Bootstrap 3.3.0 Snippet by valencia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<h2 class="text-center">Scroll down the page a bit</h2><br><br>
<div class="container">
<div class="row">
<div class="col-md-2 col-lg-2"></div>
<div class="col-md-8 col-lg-8">
<div class="barWrapper">
<span class="progressText"><B>HTML5</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" >
<span class="popOver" data-toggle="tooltip" data-placement="top" title="85%"> </span>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>CSS3</B></span>
<div class="progress ">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="10" aria-valuemax="100" style="">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="75%"> </span>
</div>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>BOOTSRAPT</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="65%"> </span>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.tooltip{
position:relative;
float:right;
}
.tooltip > .tooltip-inner {background-color: #eebf3f; padding:5px 15px; color:rgb(23,44,66); font-weight:bold; font-size:13px;}
.popOver + .tooltip > .tooltip-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #eebf3f;}
section{
margin:140px auto;
height:1000px;
}
.progress{
border-radius:0;
overflow:visible;
}
.progress-bar{
background:rgb(23,44,60);
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () {
$('[data-toggle="tooltip"]').tooltip({trigger: 'manual'}).tooltip('show');
});
$( window ).scroll(function() {
// if($( window ).scrollTop() > 10){ scroll down abit and get the action
$(".progress-bar").each(function(){
each_bar_width = $(this).attr('aria-valuenow');
$(this).width(each_bar_width + '%');
});
// }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: