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 来解决这个问题。还为每个 ProgressBar 创建 ref 和显示状态变量。这是唯一的方法吗？许多重复的代码将由 OverlayTrigger 处理。我不想使用 title 属性。

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

Answer 1

如果您使用<OverlayTrigger>

在进度条子项中，设置

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