Progressbar

[Monique]

Hi,

When using the progressbar and the value is not high, the tooltip text is displayed over the progress-label so visitors cannot see what the progressbar is about:

<div class=”progress-label”>
<span class=”text-1″>Primary</span>
</div>
<div class=”progress mb-2″>
<div class=”progress-bar progress-bar-primary” data-appear-progress-animation=”10%” style=”width: 10%;”>
<span class=”progress-bar-tooltip” style=”opacity: 1;”>10%</span>
</div>
</div>

Please advice

Regards,
Monique

---

[Support]

Hello, you can put the value inside the bar:

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary" style="width: 10%">10%</div>
</div>

More examples:
https://getbootstrap.com/docs/5.3/components/progress/#bar-sizing

---

[Author]

Posts