Bootstrap 5 Подсказки

Подсказка используется для предоставления пользователю интерактивных текстовых подсказок об элементе при перемещении указателя мыши. Всплывающая подсказка очень полезна для отображения описания различных элементов на веб-странице. Чтобы создать всплывающую подсказку, нам нужно добавить атрибут data-bs-toggle="tooltip" к элементу с атрибутом title, чтобы указать текст, который будет отображаться внутри всплывающей подсказки.

Синтаксис:

<tag class="" data-bs-toggle="tooltip" 
         title="Message You Want To Display">
    Content
</tag>

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

• SASS: это краткая форма Syntactically Awesome Style Sheet. Это обновление каскадных таблиц стилей (CSS). Sass — это препроцессор CSS. Он полностью совместим со всеми версиями CSS. Существуют переменные, которые можно использовать для управления стилем всплывающих подсказок.
• Использование : при использовании плагин всплывающих подсказок вставляет всплывающие подсказки после своего триггерного элемента. Кроме того, он генерирует текст и разметку по мере необходимости.
  • Разметка : необходимая разметка — это тип атрибута данных.
    Он включает заголовок HTML-элемента. По умолчанию. Плагин ставит его на первое место.
  • Отключенные элементы: Отключенный элемент — это элемент всплывающей подсказки. Этот элемент не отображает данные, когда пользователь фокусируется на атрибуте, наводит на него указатель мыши или щелкает его.
  • Параметры: как следует из названия, параметры могут быть переданы элементам с помощью атрибутов данных или JavaScript.
  • Методы: существует множество методов, которые можно использовать с всплывающими подсказками для выполнения таких действий, как отображение, скрытие, переключение и т. д.
  • События: Нижеуказанные события могут использоваться во всплывающих подсказках.

Пример ниже иллюстрирует всплывающие подсказки Bootstrap 5:

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

Выход:

Пример 2. В этом примере мы продемонстрируем всплывающую подсказку Bootstrap 5.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/tooltips/