Информеры

Документация и пример для добавления информеров Bootstrap на любой элемент вашего сайта.

Обзор

Что необходимо знать для использования информера:

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

Продолжайте читать, чтобы увидеть, как информеры работают на основе некоторых примеров.

Пример: Включение информеров

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

$(function () {
  $('[data-toggle="popover"]').информер()
})

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

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

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

Пример

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок информера" data-content=" Удивительный контент. Это очень привлекательно. Правда?">
  Нажмите для включения информера
</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.">
  Информер сверху
</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.">
  Информер справа 
</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.">
  Информер снизу
</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.">
  Информер слева
</button>

Закрытие при клике

Используйте триггер focus, чтобы закрыть информер при следующем клике, который делает пользователь.

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

Отключенные элементы

Элементы с disabled атрибутами не интерактивные, то есть пользователи не смогут навести курсор или нажать на них, чтобы вызвать информер. В качестве альтернативы вам потребуется запустить информер из обертке <div> or <span> и преопределить pointer-events на отключенных элементах.

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

<span class="d-inline-block" data-toggle="popover" data-content="Неотклонимый информер">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Отключенная кнопка</button>
</span>

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

Включение информеров через JavaScript:

$('#example').опции(информеров)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к 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')

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

$('#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 () {
  //напишите что-нибудь 
})