Информеры

Документация и пример для добавления информеров 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, чтобы закрыть информер при следующем клике, который делает пользователь.

Специальная разметка необходимая для отклонения при следующем нажатии

Для правильного кросс-браузерного и кросс-платформенного поведения вы должны использовать <a> тег, а не <button> тег, и вы также должны включить tabindex атрибут.

Неутстранимый информер 
$('.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="".

Название Тип По умолчанию Описание
animation boolean true

Применяет CSS-переход с исчезновением к информеру.
contaier string | element | false false

Добавляет информер к определенному элементу. Пример: container: 'body'. Эта опция особенно полезна в том плане, что она позволяет позиционировать информер в потоке документа рядом с триггерным элементом, что предотвратит всплытие информера от элемента триггера во время изменения размера окна.
content string | element | function ''

Значение содержимого по умолчанию, если атрибут data-content отсутствует.

Если функция задана, она будет вызвана с this ссылкой на элемент, к которому присоединен информер.
delay number | object 0

Задержка отображения и скрытия popover (ms) - не применяется к типу ручного триггера.

Если задано число, задержка применяется для обоих: скрыть/показать

Структура объекта: delay: { "show": 500, "hide": 100 }
html boolean false Вставьте HTML в popover. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь об атаках XSS.
placement string | function 'right'

Как разместить информер - сверху | снизу | слева | справа.
Когда auto он будет динамически переонтировать информер.

Когда функция используется для определения места размещения, она вызывается с первичным узлом DOM в качестве первого аргумента, а узел DOM триггера - своим вторым. Контекст this устанавливается на элемент информера.
selector string | false false Если предcтавлен селектор, информеры будут делегированы указанным целям. На практике это используется для того, чтобы динамический HTML-контент добавлял информеры. Смотрите this и информативный пример.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Базовый HTML для использования при создании информера.

title информера будет вставлен в .popover-header.

content информера будет вставлен в .popover-body.

.arrow станет стрелкой информера.

Внешний элемент обертки должен иметь класс .popover.
title string | element | function ''

Значение заголовка по умолчанию, если атрибутtitle отсутствует.

Если функция задана, она будет вызвана с this ссылкой на элемент, к которому присоединен информер.
trigger string 'click' Как запускается информер - при нажатии | при наведении | при фокусе. Вы можете передавать несколько триггеров; разделите их пробелом.
offset number | string 0 Смещение информера относительно его цели. Для получения дополнительной информации обратитесь к документации.
fallbackPlacement string | array 'flip' Какую альтернативную позицию будет использовать информер смотрите в документации.
boundary string | element 'scrollParent' Граница заполнения информера. Принимает значения из 'viewport', 'window', 'scrollParent', или ссылку HTML элемента (только для JavaScript). Для дополнительной информации смотрите в документации.

Атрибуты данных для отдельных информеров

Варианты для отдельных информеров можно альтернативно определить с помощью использования атрибутов данных, как описано выше.

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и начинают переход. Они возвращаются вызывающему, как только начинается переход, но до его окончания. Кроме того, вызов метода перехода компонента будет проигнорирован.

Дополнительные сведения в документации JavaScript.

$().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')

События

Тип события Описание
show.bs.popover Это событие срабатывает сразу после вызова метода show.
shown.bs.popover Это событие вызывается, когда информер становится видимым для пользователя (будет ждать завершения переходов CSS).
hide.bs.popover Это событие вызывается немедленно при вызове метода hide.
hidden.bs.popover Это событие вызывается, когда информер закончил скрываться от пользователя (будет ждать завершения CSS-переходов).
inserted.bs.popover Это событие запускается после show.bs.popover,когда шаблон информера был добавлен в DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  //напишите что-нибудь 
})