Source

Поповеры

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

Обзор

Что нужно знать при использовании плагина popover:

  • Поповеры полагаются на стороннюю библиотеку 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должны запускаться на элементе-оболочке.
  • При запуске от якорей, которые охватывают несколько строк, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrapна вашем <a>s, чтобы избежать такого поведения.
  • Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из 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>тег, а не тег <button>, и вы также должны включать tabindexатрибут.

<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)

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-animation="".

Имя Тип По умолчанию Описание
анимация логический истинный Применить CSS-переход затухания к поповеру
контейнер строка | элемент | ЛОЖЬ ЛОЖЬ

Добавляет всплывающее окно к определенному элементу. Пример: container: 'body'. Этот параметр особенно полезен тем, что позволяет расположить всплывающее окно в потоке документа рядом с инициирующим элементом, что предотвратит перемещение всплывающего окна от инициирующего элемента во время изменения размера окна.

содержание строка | элемент | функция ''

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

Если задана функция, она будет вызываться со thisссылкой, установленной на элемент, к которому прикреплено всплывающее окно.

задерживать номер | объект 0

Задержка показа и скрытия всплывающего окна (мс) — не относится к ручному типу триггера.

Если указано число, задержка применяется как к скрытию, так и к показу.

Структура объекта:delay: { "show": 500, "hide": 100 }

HTML логический ЛОЖЬ Вставьте HTML во всплывающее окно. Если false, textметод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция 'Правильно'

Как расположить всплывающее окно - авто | топ | дно | слева | Правильно.
Когда autoуказано, он будет динамически переориентировать всплывающее окно.

Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающего окна в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст thisустанавливается на экземпляр всплывающего окна.

селектор строка | ЛОЖЬ ЛОЖЬ Если предоставлен селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример .
шаблон нить '<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атрибут отсутствует.

Если задана функция, она будет вызываться со thisссылкой, установленной на элемент, к которому прикреплено всплывающее окно.

курок нить 'щелкнуть' Как срабатывает всплывающее окно - нажмите | наведите | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. manualнельзя комбинировать ни с каким другим триггером.
компенсировать номер | нить 0 Смещение всплывающего окна относительно его цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js .
резервное размещение строка | множество 'кувырок' Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации обратитесь к документации по поведению Popper.js.
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающего окна. Принимает значения 'viewport', 'window', 'scrollParent'или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js .

Атрибуты данных для отдельных всплывающих окон

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

Методы

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

Все методы 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')

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

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

.popover('enable')

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

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

.popover('disable')

Удаляет возможность отображения всплывающего окна элемента. Всплывающее окно будет отображаться только в том случае, если оно будет повторно включено.

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

.popover('toggleEnabled')

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

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

.popover('update')

Обновляет позицию всплывающего окна элемента.

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

События

Тип события Описание
показать.bs.popover Это событие срабатывает сразу же при showвызове метода экземпляра.
показанный.bs.popover Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ждать завершения переходов CSS).
скрыть.bs.popover Это событие запускается сразу после hideвызова метода экземпляра.
hidden.bs.popover Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ждать завершения переходов CSS).
вставленный.bs.popover Это событие запускается после show.bs.popoverсобытия, когда шаблон всплывающего окна был добавлен в DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})