reactjs中堆叠进度条中的进度条工具提示

Question

我正在尝试使用 react-bootstrap 在堆叠进度条的各个条上添加工具提示。这可能使用 OverlayTrigger 吗？这是我开始的代码：

<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>

我尝试在内部 ProgressBar 周围使用 OverlayTrigger，但是当在浏览器中呈现时，它们不会出现，因为每个 ProgressBar 都被视为较大进度条内的单独进度条。例如：

<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>

我可以通过为每个 ProgressBar 使用 Overlay 然后在每个 ProgressBar 上指定 onMouseEnter 和 onMouseLeave 来解决这个问题。还为每个 ProgressBars 创建 ref 和 show 状态变量。这是唯一的方法吗？大量重复代码将由 OverlayTrigger 处理。我不想使用 title 属性。

感谢您的帮助，也许我忽略了它。

Answer 1

如果您使用 <OverlayTrigger>

在进度条子项中，设置

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

reactjs中堆叠进度条中的进度条工具提示

Progressbar tooltip in stacked progress bar in reactjs

progress-bar

reactjs

react-bootstrap