Bootstrap (Часть 9) | Всплывающие подсказки

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

Следовательно, нам нужно включить tether.min.js перед bootstrap.js

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

Теперь мы рассмотрим код, который генерирует указанную выше всплывающую подсказку.

Чтобы представить всплывающую подсказку, мы добавляем атрибут data-toggle к элементу, и нам нужно инициализировать всплывающую подсказку с помощью jQuery.

Код jQuery для инициализации всплывающей подсказки:

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

• Размещение всплывающей подсказки : мы можем разместить всплывающую подсказку вверху, внизу, слева и справа от элемента.
  Пример:
  

  Код для приведенного выше примера:

  
  

  
  
  

  <!-- Tooltips on simple buttons --> <!-- Placement of tooltips --> <div class = "row" style= "margin:30px" > <div class = "col-2" > <button type= "button" class = "btn btn-info" data-toggle= "tooltip" data-placement= "top" title= "Information Button" > Information </button> </div> <div class = "col-2" > <button type= "button" class = "btn btn-success" data-toggle= "tooltip" data-placement= "right" title= "Success Button" > Success </button> </div> <div class = "col-2" > <button type= "button" class = "btn btn-danger" data-toggle= "tooltip" data-placement= "bottom" title= "Danger button" > Danger </button> </div> <div class = "col-2" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "left" title= "Warning button" > Warning </button> </div> </div>

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

• HTML в подсказке : мы можем добавить html как содержимое заметки.
  Пример:
  

  Код для приведенного выше примера:

  
  
  
  
  
  

  
  
  

  <!-- Tooltip with html --> <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "left" data-html= "true" title= "<h4>Hey!</h4><p>Tooltip with html</p>" > Warning </button> </div>

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

• Смещение для всплывающей подсказки : мы можем установить смещение всплывающей подсказки относительно цели.
  Пример:
  

  Код для приведенного выше примера:

  
  

  
  
  

  <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "right" data-offset = "20 0" title= "Don't click on Warning Button" > Warning </button> </div>

  В приведенном выше коде мы использовали атрибут data-offset, чтобы установить атрибут

Примечание. Выходные данные всего приведенного ниже кода нестатичны, поэтому выходные данные здесь не показаны.

• Анимация во всплывающей подсказке:
  По умолчанию во всплывающую подсказку добавляется анимация, то есть она появляется и исчезает, мы можем удалить эту анимацию.
  
  

  
  
  

  <!-- Removing animation from the tooltip --> <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "right" data-animation= "false" title= "Don't click on Warning Button" > Warning </button> </div>

  В приведенном выше коде мы использовали атрибут data-animation, и для него установлено значение false, чтобы удалить анимацию из всплывающей подсказки.

• Задержка появления и исчезновения : мы можем установить временной интервал для появления и исчезновения всплывающей подсказки.
  Мы можем установить задержку двумя способами:
  1. Мы устанавливаем одинаковое время задержки для отображения и скрытия
     
     

     
     
     

     <!-- Delay in tooltip --> <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "right" data-delay= "1000" title= "Don't click on Warning Button" > Warning </button> </div>

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

  2. Мы можем добавить различные интервалы времени задержки для отображения и скрытия всплывающей подсказки.
     HTML-код:
     
     

     
     
     

     <!-- Delay in tooltip --> <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "right" title= "Don't click on Warning Button" > Warning </button> </div>

     В html-коде изменений нет.
     код jQuery:

     
     

     
     
     

     <script> $(document).ready(function () { // jQuery Attribute value selector $( '[data-toggle="tooltip"]' ).tooltip({ delay: { "show" : 1000 , "hide" : 2000 } }); }); </script>

• Запуск всплывающей подсказки : мы можем добавить событие, которое будет запускать всплывающую подсказку, по умолчанию всплывающая подсказка запускается при « наведении и фокусе », различные разрешенные события: - щелчок, наведение, фокус и вручную.
  
  

  
  
  

  <!-- triggering the tooltip --> <div class = "row" style= "margin:40px" > <button type= "button" class = "btn btn-warning" data-toggle= "tooltip" data-placement= "right" data-trigger= "click" title= "Don't click on Warning Button" > Warning </button> </div>

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

Для получения информации о различных элементах bootstarp см .: Bootstrap
Справка:
https://v4-alpha.getbootstrap.com/components/tooltips/
Эта статья предоставлена Сумитом Гошем . Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью с помощью provide.geeksforgeeks.org или отправить ее по электронной почте на deposit@geeksforgeeks.org. Посмотрите, как ваша статья появляется на главной странице GeeksforGeeks, и помогите другим гикам.

Пожалуйста, напишите комментарии, если вы обнаружите что-то неправильное, или вы хотите поделиться дополнительной информацией по теме, обсужденной выше.