CODEWITHSUNDEEP
reactjsprogress-barreact-bootstrap
Chuck L
Chuck L

Reputation: 1114

Progressbar tooltip in stacked progress bar in reactjs

I'm trying to add a tooltip on the individual bars of the stacked progress bar using react-bootstrap. Is this possible using OverlayTrigger? This is the code I'm starting with:

<ProgressBar>
    <ProgressBar variant='success' now={7} max={21}></ProgressBar>
    <ProgressBar variant='danger' now={7} max={21}></ProgressBar>
    <ProgressBar variant='secondary' now={7} max={21}></ProgressBar>
</ProgressBar>

I tried using OverlayTrigger around the inner ProgressBars but when rendered in the browser, they don't appear because each ProgressBar is seen as individual progress bars inside of a larger progress bar. For example:

<div class="progress">
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-success" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-danger" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-secondary" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
</div>

I can get around this by using Overlay for each ProgressBar and then specifying onMouseEnter and onMouseLeave on each ProgressBar. Also creating ref and show state variables for each of the ProgressBars as well. Is this the only way? Lots of duplicate code that would be handled by OverlayTrigger. I didn't want to use the title attribute.

I appreciate the help, maybe I'm overlooking it.

Upvotes: 1

Views: 1990

Answers (1)

Anjo Aduana
Anjo Aduana

Reputation: 66

If your using <OverlayTrigger>

In progressbar children, set

<ProgressBar variant='success' isChild={true} now={7} max={21}></ProgressBar>

Upvotes: 5

Related Questions