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

【问题标题】：Progressbar tooltip in stacked progress bar in reactjsreactjs中堆叠进度条中的进度条工具提示
【发布时间】：2020-10-07 19:59:59
【问题描述】：

我正在尝试使用 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>

我尝试在内部 ProgressBars 周围使用 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 属性。

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

【问题讨论】：

标签： reactjs progress-bar react-bootstrap

【解决方案1】：

如果您使用<OverlayTrigger>

在进度条子项中，设置

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

【讨论】：