Компьютерапия

Bootstrap - Плагин для подсказки

Категория: Bootstrap 3
Просмотров: 1926

Всплывающие подсказки полезны, когда вам нужно описать ссылку. Плагин был вдохновлен плагином 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>



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok