Всплывающие подсказки (popover)

Для работы используется библиотека Popover. Её надо или подключить отдельно, или подключить «bootstrap.bundle.min.js», где данная библиотека уже включена.

Сначала надо запустить библиотеку.

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Затем можно указывать элементы, при нажатии на которых будет показываться подсказка:

<button type="button" data-bs-toggle="popover" data-bs-title="Заголовок" data-bs-content="Контент">Показать контент</button>

Пример кода:

По умолчанию подсказка появляется справа (если справа места нет, то библиотека сама определяет, где показать подсказу). Если по умолчанию подсказку надо открывать, например, сверху, то это можно сделать через атрибут data-bs-placement="top".

<button type="button" data-bs-toggle="popover" data-bs-title="Заголовок" data-bs-content="Контент" data-bs-placement="top">Показать контент сверху</button>

Чтобы показывать подсказку при наведении, используется атрибут data-bs-trigger="hover focus".

<button type="button" data-bs-toggle="popover" data-bs-title="Заголовок" data-bs-content="Контент" data-bs-trigger="hover focus">Показать контент</button>

Пример кода: