Информеры

Обзор

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

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

Ниже несколько примеров.

Примеры

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

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Живая демонстрация

Мы используем JavaScript, аналогичный приведенному выше фрагменту кода, для отображения следующего живого всплывающего окна. Заголовки устанавливаются с помощью data-bs-title, а содержимое тела устанавливается с помощью data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Заголовок всплывающего окна" data-bs-content="А вот и потрясающий контент. Это очень увлекательно. Верно?">Нажмите, чтобы переключить всплывающее окно</button>

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

Доступны четыре варианта: верхний, правый, нижний и левый. Направления отражаются при использовании Bootstrap в RTL. Установите data-bs-placement, чтобы изменить направление.

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

Пользовательский container

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

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

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

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Пользовательские всплывающие окна

Вы можете настроить внешний вид всплывающих окон, используя CSS-переменные. Мы устанавливаем пользовательский класс с data-bs-custom-class="custom-popover", чтобы ограничить наш пользовательский внешний вид и использовать его для переопределения некоторых локальных переменных CSS.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Пользовательское всплывающее окно"
        data-bs-content="Это всплывающее окно оформлено с помощью переменных CSS.">
  Пользовательское всплывающее окно
</button>

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

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

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

const popover = new bootstrap.Popover('.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="Отключено всплывающее окно">
  <button class="btn btn-primary" type="button" disabled>Кнопка отключена</button>
</span>

CSS

Переменные

Как часть развивающегося подхода Bootstrap к переменным CSS, всплывающие окна теперь используют локальные переменные CSS в .popover для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Переменные Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        var(--#{$prefix}body-bg);
$popover-max-width:                 276px;
$popover-border-width:              var(--#{$prefix}border-width);
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             var(--#{$prefix}border-radius-lg);
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 var(--#{$prefix}secondary-bg);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                var(--#{$prefix}body-color);
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

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

Использование

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

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

Опции

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

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

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

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

Методы

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Возвращает экземпляр всплывающего окна Bootstrap

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

События

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