Поповеры

Обзор

Что нужно знать при использовании плагина 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.

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

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

Один из способов инициализировать все всплывающие окна на странице — выбрать их по их 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 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)

Опции

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

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

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

Методы

показывать

Отображает всплывающее окно элемента. Возвращает вызывающему объекту до фактического отображения всплывающего окна (т. е. до того , как 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

События

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})