TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити підказки Bootstrap 5?

11

Підказки – це фрагмент тексту маркера, який з’являється, коли ви наводите курсор миші на гіперпосилання. У Bootstrap 5 є деякі речі, про які слід подбати, перш ніж намагатися додати підказку. Якщо ви помітили, що шаблон початківця містить нову сторонню бібліотеку JavaScript під назвою Popper. Це в основному використовується для компонента підказки для позиціонування.

Цей підручник охоплює такі глави:

  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, створених за допомогою плагіна Tipsy 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="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Вам слід використовувати атрибут data-toggle зі значенням як підказку.
  • Підказка покаже введений текст заголовка у спливаючому вікні під час наведення курсору миші.
  • Вміст для показу – це прив’язний текст, подібний до гіперпосилання.

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

Як створити підказки Bootstrap 5?

4 Підказки щодо позиціонування

Як ви бачите у наведеному вище прикладі, підказка за замовчуванням розміщуватиметься над вмістом. Bootstrap дозволяє розміщувати зверху, ліворуч, праворуч і знизу тексту прив’язки за допомогою атрибута розміщення даних.

  • Використовуйте data -cement = "top" для верхньої позиції. Це за умовчанням, тому вам не потрібно чітко згадувати.
  • Використовуйте data -cement = "bottom" для нижньої позиції.
  • Використовуйте data -cement = "right” для правильної позиції.
  • Використовуйте data -cement = “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>

Результат у браузері повинен виглядати так:

Як створити підказки Bootstrap 5?

6 Підказка "Використання вмісту HTML"

За замовчуванням підказка підтримує лише текстовий вміст всередині. Ви можете додавати HTML- теги за допомогою атрибута data-html = “true”. Нижче наведено приклад додавання перекресленого вмісту всередині підказки за допомогою тегів HTML ~…~ .

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

Як бачите, вміст всередині тегу заголовка обробляється тегами HTML, коли встановлено атрибут data-html = “true”. Нижче наведено, як це буде виглядати у браузері:

Як створити підказки Bootstrap 5?

7 Параметри налаштування підказки

Ви можете додатково налаштувати підказки за допомогою атрибутів "дані-".

  • Вимкніть ефект затухання CSS, додавши атрибут data-animation = “false”.
  • Затримка показу та приховування за допомогою атрибута затримки даних.
  • Змістити підказку від елемента за допомогою зміщення даних.

Ви можете переглянути інші приклади підказок з сайту Popper JavaScript.

Примітка: Підказки Bootstrap 5 не працюватимуть на IE8 або нижчій версії, оскільки браузер не підтримує popper.


Вивчити Bootstrap 5 (індекс )


Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі