OverlayTrigger, кажется, добавляет поле ввода в ToggleButton - PullRequest
0 голосов
/ 29 марта 2019

С помощью response-bootstrap у меня есть несколько кнопок ToggleButton, к которым я хочу добавить всплывающую подсказку, чтобы отобразить весь их текст (они отображаются в текущий момент ... если они становятся слишком длинными). В основном это работает абсолютно нормально. Хотя я могу просто добавить заголовок к каждой кнопке, я бы предпочел всплывающую подсказку в стиле Bootstrap, так как она выглядит лучше.

При добавлении триггера «Наложение» в верхней части моей кнопки появляется видимое поле ввода, которое содержит значение (а не содержимое кнопки). Кнопка, похоже, больше не работает, ее состояние определено неправильно, и кажется, что я что-то серьезно отключаю.

Спасибо за любую помощь

Я перечислил мой код ниже. Я попытался использовать пользовательские элементы Div в соответствии со стилем на веб-сайте response-bootstrap, я попытался изменить триггер на оверлее.

Следующий код работает правильно

<ToggleButton variant="outline-dark" key={valueKey} value={'The Button Value'} style={style} onChange={this._filterButtonChange} >{'My Button without Overlay'} </ToggleButton>

Следующий код дает довольно странные результаты

<OverlayTrigger placement={'right'} trigger={'hover'}
    overlay={<Tooltip>Tooltip on <strong>{'right'}</strong>.</Tooltip>}>
    <ToggleButton variant="outline-dark" key={valueKey} value={'The Button Value'} style={style} onChange={this._filterButtonChange} >{'My Button without Overlay'} </ToggleButton>

</OverlayTrigger>

Перед добавлением OverlayTrigger

Functioning Button

После добавления OverlayTrigger

Non-functioning Tooltip

...