Я использую ReactJS и bootstrap для создания popover над кнопкой. Когда пользователь остается над этой кнопкой в течение 2 секунд, содержимое и заголовок этого popover должны измениться. Проблема в том, что до этих 2 секунд у popover нет названия. Поэтому, когда я изменяю заголовок и контент, они меняются в html, но заголовок сохраняет прежнее значение «display: none». Поэтому, даже если это правильно в html, я не вижу его на экране.Динамически ADD заголовок для Bootstrap popover
Если я даю название popover перед его заменой, все работает нормально. И контент, и название обновляются и видны.
Как я могу динамически добавить заголовок к загрузочному popover, который был создан без заголовка?
Вот мой код:
render()
{
return (
<span
ref="popoverElement"
className={"popover_helper"}
onMouseOver={this.handleMouseOver}
onMouseLeave={this.handleMouseLeave}
data-container="body"
title={this.state.title}
data-content={this.state.content}
data-placement={this.props.pos}
/>
)
}
и когда я обновить значение this.state.content или this.state.title, я называю:
updatePopover()
{
const popover = $(this.refs.popoverElement).data('bs.popover');
popover.options.title = this.state.title;
$(this.refs.popoverElement).popover("show");
}
Когда я смотрю в HTML страницы я получаю это для названия пирога:
<h3 class="popover-title" style="display: none;">my tile</h3>
Это может быть глупо, но встроенный стиль переопределяет класс, поэтому если вы поместите дисплей: нет в классе, а затем измените класс, который вы можете исправить. – Gino
Я думал об этом, но у меня есть много этих popover. Как я могу настроить таргетинг только на тот, который связан с текущим popover? –
Вы уже это делаете. когда вы используете «это». вы ссылаетесь на объект, делающий вызов вашей функции – Gino