Popovers

Обзор

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

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

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover 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="Top popover">
  Всплывающее окно сверху
</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">
  Всплывающее окно справа
</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">
  Всплывающее окно снизу
</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">
  Всплывающее окно слева
</button>

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

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

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

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

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

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

Добавлено в версии 5.2.0

Вы можете настроить внешний вид всплывающих окон, используя переменные 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="Это всплывающее окно оформлено с помощью переменных 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="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Кнопка отключена</button>
</span>

CSS

Переменные

Добавлено в версии 5.2.0

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

scss/_popover.scss

--#{$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

scss/_variables.scss

$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 где последнее заданное значение ключа переопределяет остальные.

Использование функции с 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', () => {
  // сделай что-нибудь...
})