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

Обзор

Что нужно знать при использовании плагина всплывающих окон:

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

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

Пользовательский 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(--bd-violet-bg);
  --bs-popover-header-bg: var(--bd-violet-bg);
  --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="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here’s some amazing content. It’s very engaging. Right?">Dismissible popover</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="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</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:                var(--#{$prefix}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, где последний заданный ключ-значение переопределяет другие.

Using function with 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') // Returns a Bootstrap popover instance

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

События

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