Как создавать всплывающие подсказки в Bootstrap 5?

Всплывающие подсказки — это фрагменты текста маркера, которые появляются при наведении указателя мыши на гиперссылку. В Bootstrap 5 есть определенные вещи, о которых вы должны позаботиться, прежде чем пытаться добавить всплывающую подсказку. Если вы заметили, что стартовый шаблон содержит новую стороннюю библиотеку JavaScript под названием Поппер. Это в основном используется для компонента всплывающей подсказки для позиционирования.

Это руководство охватывает следующие главы:

  1. Основы всплывающих подсказок Bootstrap 5
  2. Инициализация всплывающей подсказки
  3. Использование всплывающей подсказки с тегом привязки
  4. Размещение всплывающих подсказок
  5. Использование всплывающей подсказки с кнопками
  6. Добавление HTML-содержимого во всплывающую подсказку
  7. Параметры настройки

1. Основы всплывающих подсказок Bootstrap

  • Всплывающие подсказки — это компонент JavaScript, поэтому вы должны включить файлы bootstrap.min.js в свой HTML-шаблон. В качестве альтернативы вы также можете использовать комбинированный файл сценария bootstrap.bundle.min.js.
  • Также для правильного размещения всплывающих подсказок вы должны включить popper.min.js во весь исходный код.
  • Всплывающие подсказки не загружаются по умолчанию из-за производительности загрузки страницы. Следовательно, необходимо инициализировать родительский элемент для загрузки на страницу.
  • Последовательность файлов сценария должна быть popper.min.js, bootstrap.min.js, а затем сценарий инициализации.
  • Во всплывающих подсказках не используются изображения, и концепция основана на всплывающих подсказках в стиле Facebook, созданных с помощью Подсказка плагин jQuery.
  • Всплывающая подсказка с нулевой длиной заголовка отображаться не будет.
  • Bootstrap использует CSS-анимацию и атрибуты данных для управления поведением всплывающих подсказок.

2. Инициализация всплывающих подсказок в Bootstrap

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

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

Ниже приведен код для активации всплывающей подсказки на уровне элемента привязки.

<script>
$("a").tooltip();
</script>

Ниже приведен код для использования кнопки для инициализации:

<script>
$("button").tooltip();
</script>

Помните, что этот код сценария должен быть добавлен сразу после ссылок popper.min.js и bootstrap.min.js, чтобы всплывающая подсказка работала должным образом. Вы можете проверить формат стартового шаблона здесь.

3. Использование всплывающей подсказки для тега привязки

Давайте сначала создадим простую всплывающую подсказку, используя тег привязки. Код должен выглядеть так:

<a href="https://www.webnots.com/bootstrap-tooltips-tutorial/#" data-toggle="tooltip" data-animation="false" title="This is a tooltip">
Content to Show
</a>
  • Вы должны использовать атрибут переключения данных со значением в качестве всплывающей подсказки.
  • Всплывающая подсказка покажет введенный текст заголовка во всплывающем окне при наведении курсора.
  • Частью показа является текст привязки, похожий на гиперссылку.

Результат должен выглядеть в браузере при наведении указателя мыши, как показано ниже:

Подсказка к ссылке

4. Подсказки по позиционированию

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

  • Используйте data-place = «top» для верхней позиции. Это значение по умолчанию, поэтому вам не нужно явно указывать.
  • Используйте data-place = «bottom» для нижней позиции.
  • Используйте data-place = «right» для правильного положения.
  • Используйте data-place = «left» для левой позиции.

5. Всплывающие подсказки на кнопках

Давайте создадим четыре всплывающих подсказки с разными позициями на компоненте кнопки.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>

Результат в браузере должен выглядеть следующим образом:

Подсказка к кнопкам

6. Использование HTML-содержимого во всплывающей подсказке

По умолчанию всплывающая подсказка поддерживает только текстовое содержимое внутри. Вы можете добавлять HTML-теги с помощью атрибута data-html = ”true”. Ниже приведен пример добавления зачеркнутого содержимого во всплывающую подсказку с помощью тегов HTML .

<a href="https://www.webnots.com/bootstrap-tooltips-tutorial/#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>">
Content to Show
</a>

Как видите, содержимое внутри тега title обрабатывается с помощью тегов HTML, если установлен атрибут data-html = ”true”. Вот как это будет выглядеть в браузере:

Подсказка HTML

7. Параметры настройки всплывающей подсказки

Вы можете дополнительно настроить всплывающие подсказки, используя атрибуты «data-».

  • Отключите эффект затухания CSS, добавив атрибут data-animation = ”false”.
  • Задержка показа и скрытия с атрибутом задержки данных.
  • Сдвинуть всплывающую подсказку от элемента, используя смещение данных.

Вы можете сослаться на другие примеры всплывающих подсказок из Сайт Popper JavaScript.

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


Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.