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

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится tooltip.js, после включения bootstrap.js или bootstrap.min.js.

Применение подсказок

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

  • Через атрибуты данных. Чтобы добавить всплывающую подсказку, добавьте data-toggle = "tooltip" в тег привязки. Заголовок якоря будет текстом всплывающей подсказки. По умолчанию всплывающая подсказка установлена в верхнюю часть плагина.
    <a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
    
  • Через JavaScript - запуск всплывающей подсказки с помощью JavaScript -
    $('#identifier').tooltip(options)
    

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

$(function () { $("[data-toggle = 'tooltip']").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>
           

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

Название опции Тип / значение по умолчанию Имя атрибута данных Описание
animationboolean Значение по умолчанию: truedata-animationПрименяет переход с постепенным исчезновением CSS в всплывающую подсказку.
htmlboolean Значение по умолчанию: falsedata-htmlВставляет HTML в всплывающую подсказку. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят атаки XSS.
placementstring | function По умолчанию: topdata-placementУказывает, как расположить всплывающую подсказку (т.е. Верхняя | нижняя | левая | правая | авто). Когда   указывается auto , он будет динамически переориентировать всплывающую подсказку. Например, если размещение «авто слева», всплывающая подсказка будет отображаться слева, когда это возможно, иначе оно будет отображаться справа.
Selectorstring  Значение по умолчанию: falsedata-selectorЕсли предусмотрен селектор, объекты подсказки будут делегированы указанным целям.
titlestring  | function По умолчанию: ""data-titleОпция title является значением названия по умолчанию, если   атрибут title отсутствует.
triggerstring  По умолчанию: 'hover focus'data-triggerОпределяет способ запуска всплывающей подсказки: click | hover | focus | manual . Вы можете передавать несколько триггеров; отделите их пространством.
contentstring  | function По умолчанию: ""data-contentЗначение по умолчанию для содержимого, если  атрибут « контент-контент» отсутствует
delaynumber  | object  По умолчанию: 0data-delayЗадержки, показывающие и скрывающие всплывающую подсказку в мс, не применяются к ручному типу триггера. Если задано число, задержка применяется как к экрану, так и к экрану. Структура объекта - delay: {show: 500, hide: 100}
containerstring | false Значение по умолчанию: falsedata-containerДобавляет всплывающую подсказку к определенному элементу. Пример: container: 'body'

Методы подсказок

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

Метод Описание Пример
Options - .tooltip (опции)Прикрепляет обработчик всплывающей подсказки к коллекции элементов.
$().tooltip(options)
Toggle  - .tooltip ('toggle')Переключает подсказку элемента.
$('#element').tooltip('toggle')
Show  - .tooltip ('show')Показывает подсказку элемента.
$('#element').tooltip('show')
Hide  - .tooltip ('hide')Скрывает всплывающую подсказку элемента.
$('#element').tooltip('hide')
Destroy  - .tooltip ('destroy')Скрывает и уничтожает всплывающую подсказку элемента.
$('#element').tooltip('destroy')

В следующем примере показано использование плагина 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>.

  

   







  

   <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Это событие срабатывает сразу же после вызова метода show instance.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
shown.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
})

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

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

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok