Информеры

Добавьте небольшой overlay контент, например, найденный в iOS, в любой элемент для размещения вторичной информации.

Содержание

• Содержание
• Обзор
• Пример: включить информеры везде
• Пример: использование параметра container
• Статический информер
• Демо-версия
  • Четыре направления
  • Закрытие при следующем клике
• Применение
  • Опции
  • Методы
    • $().popover(options)
    • .popover('show')
    • .popover('hide')
    • .popover('toggle')
    • .popover('dispose')
  • События

Обзор

Что нужно знать при использовании плагина информеров

• Информеры полагаются на стороннюю библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы информеры работали!
• Информеры требуют tooltip plugin.
• Информеры выбираются по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
• Значения нулевой длины title и content никогда не будут отображаться.
• Укажите container: 'body', чтобы избежать проблем с отображением более сложных компонентов (например, групп ввода, групп кнопок и т. д.).
• Запуск информеров на скрытых элементах не будет работать.
• Информеры для элементов с расширением .disabled или disabled должны быть запущены на элементе обертки.
• При запуске из гиперссылок, которые охватывают несколько строк, переходы будут центрированы. Используйте white-space: nowrap; на ваших <a>, чтобы избежать такого поведения.

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

Пример: включить информеры везде

Один из способов инициализации всех информеров на странице - выбрать их по их атрибуту 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="А здесь потрясающий контент. Это очень интересно. Не так ли?">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'
})

Применение

Включить информеры через JavaScript:

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

Опции

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

События

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