Перейти к основному содержанию

Popovers

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

Содержание

Обзор

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

Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .

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

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

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-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-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>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), { 
  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:

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

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

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

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

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

Параметры

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

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

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

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

Значение содержимого по умолчанию, если data-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 нельзя комбинировать с каким-либо другим триггером.
offset номер | строка 0 Смещение всплывающего окна относительно его цели. Дополнительные сведения см. В документации по смещению Popper.js .
fallbackPlacement строка | массив 'flip' Разрешить указать, какую позицию Поппер будет использовать при откате. Дополнительные сведения см. В документации по поведению Popper.js.
boundary строка | элемент 'scrollParent' Граница ограничения переполнения всплывающего окна. Принимает значения 'viewport', 'window', 'scrollParent' или ссылка на HTMLElement (JavaScript только). Для получения дополнительной информации см. документацию PreventOverflow Popper.js.
sanitize логический true Включите или отключите дезинфекцию. Если активировано 'template', 'content' и 'title' параметры будут очищены.
allowList объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | функция null Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
popperConfig null | объект null Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см. конфигурацию Popper.js

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

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

Методы

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

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

См. документацию по JavaScript для получения дополнительной информации .

show (показать)

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

myPopover.show()

hide (скрыть)

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

myPopover.hide()

toggle (переключить)

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

myPopover.toggle()

dispose

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

myPopover.dispose()

enable (включить)

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

myPopover.enable()

disable (отключить)

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

update (обновить)

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

myPopover.update()

getInstance

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

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

События

Тип события Описание
show.bs.popover Это событие срабатывает сразу после show вызова метода экземпляра.
показано.bs.popover Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.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...
})
Комментарии для сайта Cackle