Информеры

Обзор

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

• Поповеры полагаются на стороннюю библиотеку 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, например:

constpopoverTriggerList=document.querySelectorAll('[data-bs-toggle="popover"]')constpopoverList=[...popoverTriggerList].map(popoverTriggerEl=>newbootstrap.Popover(popoverTriggerEl))

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

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

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

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

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

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

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

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

constpopover=newbootstrap.Popover('.example-popover',{container:'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;}

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

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

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

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

constpopover=newbootstrap.Popover('.popover-dismiss',{trigger:'focus'})

<spanclass="d-inline-block"tabindex="0"data-bs-toggle="popover"data-bs-trigger="hover focus"data-bs-content="Отключено всплывающее окно"><buttonclass="btn btn-primary"type="button"disabled>Кнопка отключена</button></span>

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

$popover-font-size:$font-size-sm;$popover-bg:$white;$popover-max-width:276px;$popover-border-width:$border-width;$popover-border-color:var(--#{$prefix}border-color-translucent);$popover-border-radius:$border-radius-lg;$popover-inner-border-radius:subtract($popover-border-radius,$popover-border-width);$popover-box-shadow:$box-shadow;$popover-header-font-size:$font-size-base;$popover-header-bg:shade-color($popover-bg,6%);$popover-header-color:var(--#{$prefix}heading-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;

constexampleEl=document.getElementById('example')constpopover=newbootstrap.Popover(exampleEl,options)

constpopover=newbootstrap.Popover(element,{popperConfig(defaultBsPopperConfig){// const newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}})

// getOrCreateInstance example
constpopover=bootstrap.Popover.getOrCreateInstance('#example')// Возвращает экземпляр всплывающего окна Bootstrap
// setContent example
myPopover.setContent({'.popover-header':'another title','.popover-body':'another content'})

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