Информеры

Документация и примеры добавления всплывающих подсказок Bootstrap, подобных тем, которые находятся в iOS, к любому элементу вашего сайта.

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

• Таковой плагин использует для позиционирования 3-ю часть библиотеки Popper.js. Чтобы плагин работал, Вы должны подключать popper.min.js ПЕРЕД bootstrap.js, или использовать bootstrap.bundle.min.js / bootstrap.bundle.js – содержащие Popper.js!
• Поповеры требуют плагина всплывающих подсказок в качестве зависимости.
• Если вы подключаете ваш JavaScript в виде файла, вам потребуется util.js.
• Поповеры не подключены по умолчанию по причинам производительности, так что вы должны инициализировать их самостоятельно.
• Для работы плагина значения title and content не должны быть нулевыми.
• Задавайте container: 'body' для избегания проблем с отрисовкой в более сложных компонентах (таких как группы ввода, кнопок, т.д.)
• Запуск поповеров на скрытых элементах не работает.
• Поповеры для элементов класса .disabled or disabled должны запускаться на «оборачивающем» элементе.
• Когда поповеры запущены из ссылок, которые оборачивают множественные строки, всплывающие элементы будут центрироваться по общей ширине ссылок. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
• Поповеры должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

Ниже несколько примеров.

Пример: включайте поповеры везде

Один из способов инициализации всех поповеров на странице – выбрать их по атрибутам data-toggle:

$(function(){$('[data-toggle="popover"]').popover()})

Пример: использование параметра container

Когда у вас есть некие стили родительского элемента, которые взаимодействуют с поповером, вам потребуется создать обычный container - так, чтобы HTML ВЭ появлялся внутри того элемента.

$(function(){$('.example-popover').popover({container:'body'})})

Пример

<buttontype="button"class="btn btn-lg btn-danger"data-toggle="popover"title="Popover title"data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Четыре направления

Четыре параметра выравнивания доступны: верх, право, низ, лево.

<buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="top"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top
</button><buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="right"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right
</button><buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="bottom"data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom
</button><buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="left"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left
</button>

Отмена по клику

Используйте триггер focus для закрытия поповеров по клику на другом элементе или вне поповера.

<atabindex="0"class="btn btn-lg btn-danger"role="button"data-toggle="popover"data-trigger="focus"title="Dismissible popover"data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({trigger:'focus'})

Отключение элементов

Неактивные элементы с атрибутом disabled не являются интерактивными, т.е. юзеры не могут кликать на них для вызова поповера (или всплывающей подсказки) и по наведению их стиль не изменится. Как один из "обходных способов" - можно запустить поповер из оборачивающего элемента <div> или <span> и "преодолеть" событие pointer-events дезактивированных элементов.

Для дезактивированных элементов-триггеров поповеров также можно задать data-trigger="hover", что заставит поповер визуально "откликаться" на наведение, т.к. юзеры могут и не захотеть кликнуть на дезактивированный элемент.

<spanclass="d-inline-block"data-toggle="popover"data-content="Disabled popover"><buttonclass="btn btn-primary"style="pointer-events: none;"type="button"disabled>Disabled button</button></span>

Использование

Активируйте поповеры через JavaScript:

$('#example').popover(options)

Параметры

Параметры можно передавать через атрибуты или JS. В случае атрибутов добавляйте нужное название к data-, как в data-animation="".

Методы

$().popover(options)

Инициализирует поповеры для коллекции элементов.

.popover('show')

Выявляет поповер элемента. Возвращается к функции-вызову до того, как поповер показан (т.е. до того, как произойдет событие shown.bs.popover). Расценивается как «ручной» запуск поповера. Поповеры, чьи название и содержимое есть значения нулевой длины – никогда не отображаются.

$('#element').popover('show')

.popover('hide')

Скрывает поповер элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт. (т.е. до того, как произойдет событие hidden.bs.popover). Расценивается как «ручной» запуск поповера.

$('#element').popover('hide')

.popover('toggle')

Изменяет состояние поповера. Возвращается к функции-вызову до того, как модальный элемент скрыт. (т.е. до того, как произойдут события shown.bs.popover или hidden.bs.popover). Расценивается как «ручной» запуск поповера.

$('#element').popover('toggle')

.popover('dispose')

Скрывает и уничтожает поповер элемента. Поповеры, которые используют делегирование (т.е. которые созданы параметром селектора), не могут быть уничтожены по одному из нижестоящих элементов-триггеров.

$('#element').popover('dispose')

.popover('enable')

Дает поповеру элемента возможность быть показанным. Поповеры включены по умолчанию.

$('#element').popover('enable')

.popover('disable')

Удаляет у поповера элемента возможность быть показанным. Поповер будет иметь возможность показанным лишь если он пере-включен.

$('#element').popover('disable')

.popover('toggleEnabled')

Переключает возможность поповера элемента быть показанным или скрытым.

$('#element').popover('toggleEnabled')

.popover('update')

Обновляет позицию поповера элемента.

$('#element').popover('update')

События

$('#myPopover').on('hidden.bs.popover',function(){// do something…})