Информеры

Документация и примеры добавления всплывающих подсказок 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'
  })
})

Пример

<button type="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>

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

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

<button type="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>

<button type="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>

<button type="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>

<button type="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 для закрытия поповеров по клику на другом элементе или вне поповера.

<a tabindex="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", что заставит поповер визуально "откликаться" на наведение, т.к. юзеры могут и не захотеть кликнуть на дезактивированный элемент.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="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…
})