Bootstrap progress bars with tooltip

Design Tools

Web Technologies

Frameworks

Content Management Systems

The example above demonstrates how to use a Bootstrap progress bar combined with a tooltip to display detailed progress information.

HTML

<div class="container pb-demo">
  <div class="row">
 <div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
<span class="demo-progress-title">Design Tools</span>
  <span class="demo-progress-info demo-progress-info-100" data-toggle="tooltip" title="Adobe Creative Suite (Photoshop, Illustrator, XD), Figma, Sketch, InVision"><i class="fa-solid fa-circle-info"></i></span>
</div>

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
  <span class="demo-progress-title">Web Technologies</span>
  <span class="demo-progress-info" data-toggle="tooltip" title="HTML5, CSS3, JavaScript, jQuery, Bootstrap, Sass, LESS"><i class="fa-solid fa-circle-info"></i></span>
  </div>

<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  </div>
  <span class="demo-progress-title">Frameworks</span>
  <span class="demo-progress-info" data-toggle="tooltip" title="React, Angular, Vue.js"><i class="fa-solid fa-circle-info"></i></span>
</div>

 <div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 46%">
  </div>
  <span class="demo-progress-title">Content Management Systems</span>
  <span class="demo-progress-info" data-toggle="tooltip" title="WordPress, Joomla, Drupal"><i class="fa-solid fa-circle-info"></i></span>
  </div>
 </div>
</div>

CSS

.pb-demo .progress-bar {
  text-align: left !important;
  padding: 4px !important;
}

.pb-demo .progress {
  position: relative;
  height: 24px;
  padding: 0;
  margin-bottom: 10px;
}

.pb-demo .progress > .demo-progress-title {
  position: absolute;
  top: 2px;
  left: 10px;
  color: rgb(255, 255, 255);
}

.pb-demo .progress > .demo-progress-info {
  position: absolute;
  right: 0px;
  padding: 3px 10px 2px;
  cursor: help;
}

.pb-demo .progress > .demo-progress-info-100 {
  color: #ffffff;
}

<script language="javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip()
}) 
</script>

Bootstrap

Progress bars with tooltip