С помощью 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](https://imgur.com/eZMZqP3.png)
После добавления OverlayTrigger
![Non-functioning Tooltip](https://imgur.com/dMKL9GG.png)