Popover bootstrap не работает

Bootstrap popover is not working

The bootstrap popover is not showing up my page

Here is my HTML:

Here are all the js and css files I’ve added:

Can someone tell me where is the problem?

PS: Is there a way to get the popover to work without having to write any script code?

4 Answers 4

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

So you must call .popover() manually in JavaScript like this:

Or you can use whatever selector you want

Here’s an example using StackSnippets.

Note: This is similar to the answer to Bootstrap Tooltip Not Showing Up

Although the accepted answer is fine, when dealing with popovers, please be careful of situations with double initialization as well (Fiddle example). The below JavaScript will fail.

If you double-initialize and your popover uses values that may change or custom content, etc., you will be in a world of hurt:

One robust solution is Writing script tag of jquery, popper before bootstrap javascript.

So, this is what worked for me. I initially used $(«[data-toggle=popover]»).popover(); inside the a function just like suggested in bootstrap documentation . It was not working for me. I took the snippet out of the function and it wokred.

Источник

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

Документация и примеры добавления всплывающих окон Bootstrap, подобных тем, которые есть в iOS, к любому элементу на вашем сайте.

Обзор

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

• Всплывающие окна полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие окна работали!
• Всплывающие окна требуют [плагина всплывающей подсказки]](/docs/5.0/components/tooltips/) в качестве зависимости.
• Всплывающие окна выбираются из соображений производительности, поэтому Вы должны инициализировать их самостоятельно.
• Значения title и content нулевой длины никогда не будут показывать всплывающее окно.
• Укажите container: ‘body’ чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
• Запуск всплывающих окон для скрытых элементов не работает.
• Всплывающие окна для элементов .disabled или disabled должны запускаться на элементе оболочки.
• При запуске из якорей, которые переносятся по нескольким строкам, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap на Ваших , чтобы избежать такого поведения.
• Всплывающие окна необходимо скрыть до того, как соответствующие им элементы будут удалены из DOM.
• Всплывающие окна могут запускаться благодаря элементу внутри теневой DOM.

Продолжайте читать, чтобы увидеть, как работают всплывающие окна, на некоторых примерах.

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

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

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

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

Пример

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

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Направления зеркалируются при использовании Bootstrap в RTL.

Отклонить при следующем нажатии

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

Специальная разметка, необходимая для закрытия при следующем клике

Для правильного кроссбраузерного и кроссплатформенного поведения Вы должны использовать тег , не тег , и Вы также должны включить tabindex .

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

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть по ним, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути Вы захотите запускать всплывающее окно из оболочки

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

Переменные

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

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

Как заставить всплывающие окна работать для пользователей клавиатуры и вспомогательных технологий

Чтобы позволить пользователям клавиатуры активировать Ваши всплывающие окна, Вам следует добавлять их только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формами). Хотя произвольные элементы HTML (такие как ) можно сделать доступными для фокусировки, добавив атрибут tabindex=»0″ , это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры, и большинство Вспомогательные технологии в настоящее время не объявляют содержимое всплывающего окна в этой ситуации. Кроме того, не полагайтесь исключительно на hover как на триггер для Ваших всплывающих окон, так как это сделает их невозможным для пользователей клавиатуры.

Хотя Вы можете вставлять богатый структурированный HTML-код в всплывающие окна с опцией html , мы настоятельно рекомендуем Вам избегать добавления чрезмерного количества контента. В настоящее время всплывающие окна работают так, что после отображения их содержимое привязывается к элементу триггера с атрибутом aria-describedby . В результате весь контент всплывающего окна будет объявлен пользователям вспомогательных технологий как один длинный непрерывный поток.

Кроме того, хотя можно также включить интерактивные элементы управления (например, элементы формы или ссылки) в Ваше всплывающее окно (путем добавления этих элементов в allowList разрешенных атрибутов и тегов), имейте в виду, что в настоящее время всплывающее окно не управляет фокусом клавиатуры. Когда пользователь клавиатуры открывает всплывающее окно, фокус остается на инициирующем элементе, и поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что перемещение вперед/нажатие TAB приведет к перемещению пользователя клавиатуры в само всплывающее окно. Короче говоря, простое добавление интерактивных элементов управления к всплывающему окну может сделать эти элементы управления недоступными/непригодными для использования пользователями клавиатуры и пользователей вспомогательных технологий или, по крайней мере, сделать общий порядок фокусировки нелогичным. В этих случаях рассмотрите возможность использования модального диалога.

Параметры

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

Добавляет всплывающее окно к определенному элементу. Пример: container: ‘body’ . Этот параметр особенно полезен тем, что позволяет Вам размещать всплывающее окно в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающего окна от элемента запуска во время изменения размера окна.

Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует.

Если задана функция, она будет вызываться со ссылкой this , установленной на элемент, к которому прикреплено всплывающее окно.

Задержка показа и скрытия всплывающего окна (мс) — не относится к ручному типу триггера

Если указан номер, задержка применяется как к скрытию, так и к отображению.

Структура объекта: delay:

Как разместить всплывающее сообщение — auto | top | bottom | left | right.
Когда auto , всплывающее окно будет динамически переориентировано.

Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающего окна в качестве первого аргумента и узла DOM элемента запуска в качестве второго. Контекст this установлен на экземпляр всплывающего окна.

Значение заголовка по умолчанию, если атрибут title отсутствует.

Если задана функция, она будет вызываться со ссылкой this , установленной на элемент, к которому прикреплено всплывающее окно.

Добавляйте классы в всплывающее окно, когда оно отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: ‘class-1 class-2’ .

Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов.

Смещение всплывающего окна относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″

Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: [skidding, distance] .

Дополнительную информацию смотрите в offset документации Popper.

Смещение всплывающего окна относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″

Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение popper, ссылку и popper rects в качестве первого аргумента. Узел DOM запускающего элемента передается в качестве второго аргумента. Функция должна возвращать массив с двумя числами: [skidding, distance] .

Дополнительную информацию смотрите в offset документации Popper.

Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.

Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.

Атрибуты данных для отдельных всплывающих окон

В качестве альтернативы параметры для отдельных всплывающих окон можно указать с помощью атрибутов данных, как описано выше.

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Показывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было показано (то есть до того, как произойдет событие shown.bs.popover ). Это считается “ручным” запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

Скрывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически скрыто (т.е. до того, как произойдет событие hidden.bs.popover ). Это считается “ручным” запуском всплывающего окна.

toggle

Переключает всплывающее окно элемента (Удаляет сохраненные данные в элементе DOM). Возврат к вызывающей стороне до того, как всплывающее окно было фактически показано или скрыто (то есть до того, как произойдет событие shown.bs.popover или hidden.bs.popover ). Это считается “ручным” запуском всплывающего окна.

dispose

Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием параметр selector ), не могут быть уничтожены индивидуально для дочерних элементов триггера.

enable

Дает возможность отображения всплывающего окна элемента. По умолчанию всплывающие окна включены.

disable

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

toggleEnabled

Переключает возможность отображения или скрытия всплывающего окна элемента.

update

Обновляет позицию всплывающего окна элемента.

getInstance

Статический метод, который позволяет Вам получить экземпляр всплывающего окна, связанный с элементом DOM

getOrCreateInstance

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

События

Наименование	Тип	По умолчанию	Описание
animation	boolean	true	Применить переход CSS fade к всплывающему окну
container	string | element | false	false
content	string | element | function	»
html	boolean	false	Вставьте HTML в всплывающее окно. Если false, свойство, innerText будет использоваться для вставки содержимого в DOM. Используйте текст, если Вас беспокоят XSS-атаки.
placement	string | function	‘right’
selector	string | false	false	Если указан селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-контента. См. это и информативный пример.
template	string	‘ Базовый HTML-код для использования при создании всплывающего окна. title всплывающего окна будет вставлен в .popover-header . content всплывающего окна будет вставлен в .popover-body . .popover-arrow станет стрелкой всплывающего окна. Самый внешний элемент оболочки должен иметь класс .popover .
title	string | element | function	»
trigger	string	‘click’	Как запускается всплывающее окно — click | hover | focus | manual. Вы можете передать несколько триггеров; разделите их пробелом. manual нельзя комбинировать с другими триггерами.
fallbackPlacements	array	[‘top’, ‘right’, ‘bottom’, ‘left’]	Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Дополнительную информацию смотрите в документации о поведении Popper.
boundary	string | element	‘clippingParents’	Граница ограничения переполнения всплывающего окна (применяется только к модификатору Popper preventOverflow). По умолчанию это ‘clippingParents’ и может принимать ссылку HTMLElement (только через JavaScript). Дополнительную информацию смотрите в detectOverflow документации Popper.
customClass	string | function	»
sanitize	boolean	true	Включите или отключите дезинфекцию. Если активированы параметры ‘template’ , ‘content’ и ‘title’ , будут очищены. Смотрите раздел очистки в нашей документации по JavaScript.
allowList	object	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
sanitizeFn	null | function	null	Здесь Вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
offset	array | string | function	[0, 0]
offset	array | string | function	[0, 8]
popperConfig	null | object | function	null

Тип события	Описание
show.bs.popover	Это событие запускается немедленно при вызове метода экземпляра show .
shown.bs.popover	Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.popover	Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.popover	Это событие запускается, когда всплывающее окно перестало быть скрытым от пользователя (будет ожидать завершения переходов CSS).
inserted.bs.popover	Это событие запускается после события show.bs.popover , когда шаблон всплывающего окна добавлен в DOM.

Bootstrap

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.0.2.

Источник