Информеры

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов подсказки (поповеров):

• Плагин использует стороннюю библиотеку Popper.js для позиционирования. Чтобы всплывающие окна работали Вы должны подключать popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js – содержащие Popper.js!
• Поповеры требуют плагина всплывающих подсказок в качестве зависимости.
• Всплывающие подсказки (поповеры) не подключены по умолчанию по причинам производительности, так что вы должны инициализировать их самостоятельно.
• Для работы плагина значения title and content не должны быть нулевыми.
• Задавайте container: 'body' для избегания проблем с отрисовкой в более сложных компонентах (таких как группы ввода, кнопок, т.д.)
• Запуск поповеров на скрытых элементах не работает.
• Поповеры для элементов класса .disabled or disabled должны запускаться на «оборачивающем» элементе.
• Когда поповеры запущены из ссылок, которые оборачивают множественные строки, всплывающие элементы будут центрироваться по общей ширине ссылок. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
• Поповеры должны быть скрыты до того, как соответствующие им элементы будут удалены из 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="Заголовок всплывающего сообщения" data-bs-content="А вот и потрясающий контент. Это очень интересно. Правильно?">Нажмите, чтобы переключить всплывающее окно</button>

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

Четыре параметра выравнивания доступны: верх, право, низ, лево.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Верхнее всплывающее окно">
  Всплывающее окно вверху
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Правое всплывающее окно">
  Всплывающее окно справа
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Нижнее всплывающее окно">
  Всплывающее окно внизу
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Левое всплывающее окно">
  Всплывающее окно слева
</button>

Отмена по клику

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Отклоняемое всплывающее окно" data-bs-content="А вот и потрясающий контент. Это очень интересно. Правильно?">Отклоняемое всплывающее окно</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

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

Неактивные элементы с атрибутом disabled не являются интерактивными, т.е. юзеры не могут кликать на них для вызова поповера (или всплывающей подсказки) и по наведению их стиль не изменится. Как один из "обходных способов" - можно запустить поповер из оборачивающего элемента <div> или <span> и "преодолеть" событие pointer-events дезактивированных элементов.

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

<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>Отключенная кнопка</button>
</span>

Sass

Переменные

$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="". Обязательно измените тип case имени опции с 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
  }
})

Методы

show

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

myPopover.show()

hide

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

myPopover.hide()

toggle

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

myPopover.toggle()

dispose

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

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

События

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // сделайте что-нибудь...
})