Перейти к основному содержанию Перейти к навигации по документам
in English

Поповеры

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

Обзор

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

  • Поповеры полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js/ bootstrap.bundle.jsкоторый содержит Popper, чтобы всплывающие окна работали!
  • Всплывающие окна требуют плагина всплывающей подсказки в качестве зависимости.
  • Всплывающие окна являются дополнительными из соображений производительности, поэтому вы должны инициализировать их самостоятельно .
  • Нулевая длина titleи contentзначения никогда не будут показывать всплывающее окно.
  • Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.).
  • Запуск всплывающих окон для скрытых элементов не будет работать.
  • Всплывающие окна для элементов .disabledили disabledдолжны запускаться на элементе-оболочке.
  • При запуске от якорей, которые охватывают несколько строк, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrapна вашем <a>s, чтобы избежать такого поведения.
  • Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.
  • Всплывающие окна могут запускаться благодаря элементу внутри теневого DOM.
По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет все элементы HTML, которые явно не разрешены. Дополнительные сведения см. в разделе « дезинфицирующее средство» в нашей документации по JavaScript.
Эффект анимации этого компонента зависит от prefers-reduced-motionмедиа-запроса. См. раздел с ограниченным движением в нашей документации по специальным возможностям .

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

Пример: включить всплывающие окна везде

Один из способов инициализировать все всплывающие окна на странице — выбрать их по их data-bs-toggleатрибуту:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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

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

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Пример

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

Доступны четыре варианта: выравнивание по верхнему, правому, нижнему и левому краю. Направления отражаются при использовании Bootstrap в RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Закрыть при следующем нажатии

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

Для закрытия при следующем щелчке требуется специальная разметка.

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

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

Элементы с этим disabledатрибутом не интерактивны, то есть пользователи не могут навести на них курсор или щелкнуть их, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути вы захотите вызвать всплывающее окно из оболочки <div>или <span>, в идеале с фокусом на клавиатуре, с помощью tabindex="0".

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Сасс

Переменные

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Применение

Включить всплывающие окна через JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Настройка всплывающих окон для пользователей клавиатуры и вспомогательных технологий

Чтобы позволить пользователям клавиатуры активировать ваши всплывающие окна, вы должны добавлять их только к элементам HTML, которые традиционно являются интерактивными и ориентированными на клавиатуру (такими как ссылки или элементы управления формы). Хотя произвольные элементы HTML (например, <span>s) можно сделать фокусируемыми, добавив tabindex="0"атрибут, это добавит потенциально раздражающие и запутанные табуляции для неинтерактивных элементов для пользователей клавиатуры, и большинство вспомогательных технологий в настоящее время не объявляют содержимое всплывающего окна в этой ситуации. . Кроме того, не полагайтесь исключительно на hoverтриггер для ваших всплывающих окон, так как это сделает их невозможными для пользователей клавиатуры.

Хотя вы можете вставлять богатый структурированный HTML-код во всплывающие окна с помощью этой htmlопции, мы настоятельно рекомендуем вам избегать добавления чрезмерного количества контента. В настоящее время всплывающие окна работают следующим образом: после отображения их содержимое привязывается к элементу триггера с aria-describedbyатрибутом. В результате весь контент всплывающего окна будет объявлен пользователям вспомогательных технологий одним длинным непрерывным потоком.

Кроме того, хотя в всплывающее окно можно также включать интерактивные элементы управления (такие как элементы формы или ссылки) (путем добавления этих элементов в список allowListразрешенных атрибутов и тегов), имейте в виду, что в настоящее время всплывающее окно не управляет порядком фокуса клавиатуры. Когда пользователь с клавиатурой открывает всплывающее окно, фокус остается на вызывающем его элементе, и, поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что перемещение вперед/нажатиеTABпереместит пользователя клавиатуры в само всплывающее окно. Короче говоря, простое добавление интерактивных элементов управления во всплывающее окно, вероятно, сделает эти элементы управления недоступными/непригодными для пользователей клавиатуры и пользователей вспомогательных технологий или, по крайней мере, приведет к нелогичному общему порядку фокуса. В этих случаях рассмотрите возможность использования вместо этого модального диалогового окна.

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-bs-, как в data-bs-animation="". Не забудьте изменить тип регистра имени параметра с camelCase на kebab-case при передаче параметров через атрибуты данных. Например, вместо использования data-bs-customClass="beautifier"используйте data-bs-custom-class="beautifier".

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFnи allowListне могут быть предоставлены с использованием атрибутов данных.
Имя Тип По умолчанию Описание
animation логический true Применить CSS-переход затухания к поповеру
container строка | элемент | ЛОЖЬ false

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

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

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

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

delay номер | объект 0

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

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

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

html логический false Вставьте HTML во всплывающее окно. Если false, innerTextсвойство будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
placement строка | функция 'right'

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

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

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

Базовый HTML для использования при создании всплывающего окна.

Поповеры titleбудут внедрены в файл .popover-header.

Поповеры contentбудут внедрены в файл .popover-body.

.popover-arrowстанет стрелкой всплывающего окна.

Самый внешний элемент-оболочка должен иметь .popoverкласс.

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

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

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

trigger нить 'click' Как срабатывает всплывающее окно - нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. manualнельзя комбинировать ни с каким другим триггером.
fallbackPlacements множество ['top', 'right', 'bottom', 'left'] Определите резервные места размещения, предоставив список мест размещения в виде массива (в порядке предпочтения). Для получения дополнительной информации обратитесь к документам поведения Поппера.
boundary строка | элемент 'clippingParents' Граница ограничения переполнения поповера (применяется только к модификатору preventOverflow Поппера). По умолчанию он 'clippingParents'может принимать ссылку HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к документации Popper's detectOverflow .
customClass строка | функция ''

Добавляйте классы во всплывающее окно, когда оно отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 'class-1 class-2'.

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

sanitize логический true Включите или отключите очистку. Если активировано 'template', 'content'и 'title'параметры будут очищены. См. раздел дезинфицирующих средств в нашей документации по JavaScript .
allowList объект Значение по умолчанию Объект, который содержит разрешенные атрибуты и теги
sanitizeFn ноль | функция null Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки.
offset массив | строка | функция [0, 8]

Смещение всплывающего окна относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например:data-bs-offset="10,20"

Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение поппера, ссылку и прямоугольники поппера в качестве первого аргумента. Узел триггерного элемента DOM передается в качестве второго аргумента. Функция должна вернуть массив с двумя числами: .[skidding, distance]

Для получения дополнительной информации обратитесь к документации по смещению Поппера .

popperConfig ноль | объект | функция null

Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см . Конфигурация Popper .

Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Bootstrap по умолчанию Popper. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.

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

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

Использование функции сpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

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

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

Дополнительную информацию см. в нашей документации по JavaScript .

показывать

Отображает всплывающее окно элемента. Возвращает вызывающему объекту до фактического отображения всплывающего окна (т. е. до того , как shown.bs.popoverпроизойдет событие). Это считается «ручным» запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

myPopover.show()

Спрятать

Скрывает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно будет фактически скрыто (т. е. до того , как hidden.bs.popoverпроизойдет событие). Это считается «ручным» запуском всплывающего окна.

myPopover.hide()

переключать

Переключает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно было действительно показано или скрыто (т. е. до того, как произошло событие shown.bs.popoverили ). hidden.bs.popoverЭто считается «ручным» запуском всплывающего окна.

myPopover.toggle()

распоряжаться

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

myPopover.dispose()

включить

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

myPopover.enable()

запрещать

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

Обновить

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

myPopover.update()

получить экземпляр

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

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

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

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

События

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