Bootstrap — показ произвольного html контента подсказки в popover

Один из компонентов Bootstrap — popover — создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету.

Стандартный шаблон использования:

Как видим data-content содержит текст, который будет показан при клике на контейнер. Если требуется произвести вычисления для рендеринга контента, то можно использовать ручную инициализацию компонента следующего вида:

Так как контент вычисляется внутри функции, то атрибут data-content нужно опустить. Далее рассмотрим более конкретный пример использования данного подхода.

Дополнительно зададим собственный атрибут (т.е. не используемый bootstratp) data-popover-content куда будем задавать id контейнера, содержащего html текст подсказки.

Тогда инициализация контейнера пример вид:

Написать комментарий

Мало букафф? Читайте есчо !

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

 

Комментарии к «Bootstrap — показ произвольного html контента подсказки в popover»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: