Progress Bars with CSS Tooltips


Recently, I built progress bars with tooltips that indicate the completion percentage of the progress bars. I wasn't able to find a pre-built UI component or library that could do exactly what I wanted, so I built my own extensible solution. This article is a compilation of my process notes written as a guide to explain how the solution works.

Criteria

  • The progress bar should have a tooltip that acts as a "callout" to display the progress bar's percentage
  • The callouts can't run outside the container when they're at or near the minimum and maximum values of the progress bar

Progress Bars with Callouts

Why this is difficult

Many progress bars with tooltips use :after pseudo-elements in CSS. This is problematic because jQuery can't target ::after elements. They aren't part of the DOM. We'll need a different way to modify the position of the tooltips.

Our progress bars also need to interface easily with the data coming from our application. In practical terms, this means I need to be able to grab onto the elements and easily modify their "percent-completed" values.

How this solution addresses these difficulties

We add a data-percentage attribute on each progress bar element. It's easy to read and set this attribute using jQuery or vanilla JavaScript DOM manipulation.

The progress bar's data-percentage attribute is used to set the width of the progress bar element.

jQuery positions the arrow on the left or right of the tooltip based on the value of the data-percentage attribute.

The Result

JSFiddle

Check out the JSFiddle to play with the progress bars yourself.

References