Информеры

Обзор

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

• Плагин использует стороннюю библиотеку 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:

varpopoverTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))varpopoverList=popoverTriggerList.map(function(popoverTriggerEl){returnnewbootstrap.Popover(popoverTriggerEl)})

Пример: Использование параметра container

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

varpopover=newbootstrap.Popover(document.querySelector('.example-popover'),{container:'body'})

Пример

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

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

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

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

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

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

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

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

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

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

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

<spanclass="d-inline-block"tabindex="0"data-bs-toggle="popover"data-bs-trigger="hover focus"data-bs-content="Disabled popover"><buttonclass="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:

varexampleEl=document.getElementById('example')varpopover=newbootstrap.Popover(exampleEl,options)

Параметры

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

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

varpopover=newbootstrap.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

varexampleTriggerEl=document.getElementById('example')varpopover=bootstrap.Popover.getInstance(exampleTriggerEl)// Returns a Bootstrap popover instance

События

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