• This topic has 1 reply, 2 voices, and was last updated 4 weeks ago by Support. This post has been viewed 114 times
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10044963
    Monique
    Participant

    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


    #10044965
    Support
    Keymaster

    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


Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.