Bootstrap - Подключаемый модуль всплывающей подсказки

Всплывающие подсказки полезны, когда вам нужно описать ссылку. Плагин был вдохновлен плагином jQuery.tipsy, написанным Джейсоном Фреймом . С тех пор всплывающие подсказки были обновлены для работы без изображений, анимации с помощью CSS-анимации и атрибутов данных для локального хранения заголовков.

Если вы хотите включить этот плагин индивидуально, вам понадобится tooltip.js. В противном случае, как упоминалось в главе Обзор подключаемых модулей Bootstrap , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

Применение

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

  • Via data attributes - Чтобы добавить всплывающую подсказку, добавьте data-toggle = "tooltip"к тегу привязки. Заголовок привязки будет текстом всплывающей подсказки. По умолчанию плагин устанавливает всплывающую подсказку вверху.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
  • Via JavaScript - Запуск всплывающей подсказки через JavaScript -

$('#identifier').tooltip(options)

Плагин Tooltip - это НЕ только плагины css, такие как dropdown или другие плагины, описанные в предыдущих главах. Чтобы использовать этот плагин, вы ДОЛЖНЫ активировать его с помощью jquery (читайте javascript). Чтобы включить все всплывающие подсказки на вашей странице, просто используйте этот скрипт -

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

пример

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Параметры

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

Название опции Тип / значение по умолчанию Имя атрибута данных Описание
анимация логическое По умолчанию: true данные-анимация Применяет к всплывающей подсказке плавный переход CSS.
html логическое По умолчанию: false data-html Вставляет HTML во всплывающую подсказку. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят XSS-атаки.
размещение строка | функция По умолчанию: вверх размещение данных

Определяет, как расположить всплывающую подсказку (то есть вверху | внизу | слева | справа | автоматически).

Если указано auto , всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае - справа.

селектор строка По умолчанию: false селектор данных Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.
заглавие строка | функция По умолчанию: " заголовок данных Параметр заголовка является значением заголовка по умолчанию, если атрибут заголовка отсутствует.
триггер строка По умолчанию: 'hover focus' триггер данных Определяет, как запускается всплывающая подсказка: click| hover | focus | manual. Вы можете передать несколько триггеров; разделите их пробелом.
содержание строка | функция По умолчанию: '' информационное наполнение Значение содержимого по умолчанию, если атрибут содержимого-данных отсутствует
задержка номер | объект По умолчанию: 0 задержка данных

Задержки показа и скрытия всплывающей подсказки в мс - не относится к ручному типу триггера. Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта -

delay: { show: 500, hide: 100 }
контейнер строка | false По умолчанию: false контейнер данных Добавляет всплывающую подсказку к определенному элементу. Пример: контейнер: 'тело'

Методы

Ниже приведены некоторые полезные методы для всплывающих подсказок -

Метод Описание пример

Options - .tooltip (параметры)

Присоединяет обработчик всплывающей подсказки к коллекции элементов.
$().tooltip(options)

Toggle - .tooltip ('переключатель')

Переключает всплывающую подсказку элемента.
$('#element').tooltip('toggle')

Show - .tooltip ('показать')

Показывает всплывающую подсказку элемента.
$('#element').tooltip('show')

Hide - .tooltip ('скрыть')

Скрывает всплывающую подсказку элемента.
$('#element').tooltip('hide')

Destroy - .tooltip ('уничтожить')

Скрывает и уничтожает всплывающую подсказку элемента.
$('#element').tooltip('destroy')

пример

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

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

События

В следующей таблице перечислены события для работы с плагином всплывающей подсказки. Это событие можно использовать для подключения к функции.

Событие Описание пример
show.bs.tooltip Это событие срабатывает сразу после вызова метода экземпляра шоу.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
показано.bs.tooltip Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (будет ожидать завершения переходов CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip Это событие запускается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

пример

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>