Всплывающая подсказка для индикатора выполнения в сложенном индикаторе выполнения в reactjs - PullRequest
Новая
       83

Всплывающая подсказка для индикатора выполнения в сложенном индикаторе выполнения в reactjs

0 голосов
/ 18 июня 2020

Я пытаюсь добавить всплывающую подсказку к отдельным столбцам сложенного индикатора выполнения, используя response- 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>

Я пробовал использовать OverlayTrigger для внутренних ProgressBars, но при отображении в браузере они не отображаются, потому что каждый 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>

Я могу обойти это, используя Overlay для каждого ProgressBar, а затем указав onMouseEnter и onMouseLeave для каждого ProgressBar. Также создайте переменные ref и show state для каждого из ProgressBars. Это единственный способ? Много повторяющегося кода, который будет обрабатываться OverlayTrigger. Я не хотел использовать атрибут title.

Я ценю помощь, может быть, я ее не замечаю.

1 Ответ

1 голос
/ 01 июля 2020

Если вы используете <OverlayTrigger>

В дочерних элементах панели выполнения, установите

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

...