Bootstrap — Подсказка

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

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

использование

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

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

Через атрибуты данных — чтобы добавить всплывающую подсказку, добавьте data-toggle = «tooltip» к тегу привязки. Название якоря будет текстом всплывающей подсказки. По умолчанию всплывающая подсказка устанавливается на верхнюю часть плагином.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

• С помощью JavaScript — вызвать всплывающую подсказку с помощью JavaScript —

С помощью JavaScript — вызвать всплывающую подсказку с помощью JavaScript —

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

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

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

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

пример

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

<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. В следующей таблице перечислены параметры —

delay: { show: 500, hide: 100 }

Определяет, как расположить всплывающую подсказку (т. Е. Top | bottom | left | right | auto).

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

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

методы

Ниже приведены некоторые полезные методы для подсказок:

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#element').tooltip('destroy')

Опции — .tooltip (опции)

Toggle — .tooltip (‘toggle’)

Show — .tooltip (‘показать’)

Скрыть — .tooltip («скрыть»)

Уничтожить — .tooltip (‘уничтожить’)

пример

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

<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>

События

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

$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})

$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

пример

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