Bootstrap 3 - Всплывающие подсказки (tooltip)

На этом уроке Вы научитесь создавать всплывающие подсказки с помощью Twitter Bootstrap. Эти подсказки можно добавлять к любым HTML-элементам (изображениям, текстовым элементам, ссылкам и др.).

Что такое всплывающая подсказка (tooltip)?

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

Создание и инициализация всплывающей подсказки в Bootstrap

Создавать всплывающие подсказки к элементам HTML в Twitter Bootstrap можно двумя различными способами:

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

    После этого переходят к инициализации подсказок на странице с помощью кода JavaScript, в котором вызывается метод tooltip() для всех элементов на странице, имеющих атрибут data-toggle="tooltip".

    Внимание: Отмена автоматической инициализации всплывающих подсказок (компонентов tooltips) в Twitter Bootstrap выполнена из-за соображений производительности.

    В качестве примера рассмотрим создание всплывающей подсказки для элемента a, т.е. при наведении на ссылку HTML:

    <a href="#" data-toggle="tooltip" title="Текст всплывающей подсказки">
      Ссылка с tooltip
    </a>
    
    <!-- Скрипт для инициализации элементов на странице, имеющих атрибут data-toggle="tooltip" -->
    <script>
    // после загрузки страницы
    $(function () {
      // инициализировать все элементы на страницы, имеющих атрибут data-toggle="tooltip", как компоненты tooltip
      $('[data-toggle="tooltip"]').tooltip()
    })
    </script>
    
  • Второй способ заключается в активизации всплывающей подсказки с помощью кода JavaScript (с использованием библиотеки jQuery) посредством указания идентификатора или класса элемента, содержащего подсказку. По сути данный способ особенно ни чем не отличается от предыдущего, а только тем что выбор элементов осуществляется по-другому.

    <a id="tooltip" href="#" title="Текст всплывающей подсказки">
      Ссылка с tooltip
    </a>
    
    <!-- Скрипт для инициализации элемента на странице, имеющего идентификатор tooltip -->
    <script>
    // после загрузки страницы
    $(function() {
      // инициализировать элемент, имеющий идентификатор tooltip, как компонент tooltip
      $('#tooltip').tooltip();
    });
    </script>
    

Настройка всплывающих подсказок (tooltip)

В следующей таблице приведены параметры, с помощью которых Вы можете настроить функциональность и поведение всплывающих подсказок. Настройка может осуществляться как с помощью атрибутов data-, так и в коде JavaScript:

Имя Описание
animation Тип: boolean. Значение по умолчанию: true. Применяет эффект выцветания (CSS fade) к подсказке. Данный параметр также можно установить с помощью data атрибута data-animation. Например: data-animation="false".
html Тип: boolean. Значение по умолчанию: false. При включении данного параметра, в компоненте tooltip разрешается использовать HTML-код. Если установлено значение false, то будет использоваться метод "text" jQuery, который вставит содержимое в объектную модель документа (DOM) HTML. Пользуйтесь данным методом с осторожностью, так как в случае использования HTML вы можете подвергнуть свой сайт XSS-атакам. Данный параметр также можно установить с помощью data атрибута data-html. Например: data-html="true"
placement Тип: string | function. Значение по умолчанию: top. Параметр "placement" задаёт месторасположение подсказки и принимает следующие значения: top, bottom, left, right, auto. Значение auto предназначено для динамического переориентирования подсказок. Например, если местоположение задано как "auto left", то подсказка будет показываться слева от элемента, когда это возможно, в противном случае она будет отображаться справа от элемента. Данный параметр также можно установить с помощью data атрибута data-placement. Например: data-placement="bottom"
title Тип: string | function. Значение по умолчанию: ''. Устанавливает значение подсказки по умолчанию, если атрибут title не указан. Данный параметр также можно установить с помощью атрибута data-title, например: data-title="Подсказка по умолчанию"
trigger Тип: string. Значение по умолчанию: 'hover focus'. Параметр "trigger" определяет при каких обстоятельствах подсказка срабатывает: click (при нажатии, клике), hover (при наведении курсора), focus (при нахождении элемента в фокусе), manual (при самостоятельном задании). При использовании нескольких значений параметра "trigger" разделите их между собой с помощью пробела. Данный параметр также можно установить с помощью атрибута data-trigger, например: data-trigger="click".
delay Тип: number | object. Значение по умолчанию: 0. Устанавливает время задержки при отображении и скрытии всплывающих подсказок в миллисекундах. Не применяется к значению trigger manual. При указании одного значения, время задержки применяется в обоих случаях - для отображения и для скрытия. Структура параметра: delay: { show: 500, hide: 100 }. Данный параметр также можно установить с помощью data атрибута data-delay. Например: data-delay="1000".

Пример настройки всплывающей подсказки с помощью атрибутов data-

На следующем примере демонстрируем то, как осуществляется настройка Bootstrap компонента tooltip с помощью атрибутов data-:

<!-- Всплывающая подсказка, которая отображается сверху от элемента элемента <a> -->
<a href="#" data-toggle="tooltip" title="Подсказка">
  Ссылка с tooltip
</a>
<!-- Всплывающая подсказка, которая отображается слева от элемента <a> -->
<a href="#" data-toggle="tooltip" data-placement="left" title="Подсказка">
Ссылка  с tooltip
</a>
<!-- Всплывающая подсказка, которая располагается снизу от кнопки -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Подсказка">
  Кнопка с подсказкой
</button>
<!-- Всплывающая подсказка, которая располагается справа от кнопки -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Подсказка">
  Кнопка с подсказкой
</button>

<!-- Скрипт для инициализации элементов на странице, имеющих атрибут data-toggle="tooltip" -->
<script>
  $(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
  });
</script>
Bootstrap - Настройка всплывающих подсказок (tooltip) с помощью атрибутов data-
Bootstrap - Настройка всплывающих подсказок (tooltip) с помощью атрибутов data-

Рассмотрим ещё один пример, в котором настройка всплывающих подсказок, осуществляется с помощью атрибутов data-:

<ul class="list-inline">
  <!-- Всплывающая подсказка с расположением по умолчанию -->
  <li>
    <a href="#" data-toggle="tooltip" title="Подсказка">Ссылка с tooltip</a>
  </li>
  <!-- Всплывающая подсказка, которая расположена слева от ссылки -->
  <li>
    <a href="#" data-toggle="tooltip" data-placement="left" title="Подсказка слева">Подсказка слева</a>
  </li>
  <!-- Всплывающая подсказка, содержащая длинный текст -->
  <li>
    <a href="#" data-toggle="tooltip" title="Подсказка с очень длинным текстом для демонстрации максимальной ширины tooltip.">Очень длинная подсказка</a>
  </li>
  <!-- Всплывающая подсказка для кнопки -->
  <li>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Подсказка для кнопки">Кнопка
    </button>
  </li>
  <!-- Ещё одна всплывающая подсказка для кнопки -->
  <li>
    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="right" title="Подсказка справа от кнопки">Другая кнопка
    </button>
  </li>
</ul>

<!-- Скрипт для инициализации элементов на странице, имеющих атрибут data-toggle="tooltip" -->
<script type="text/javascript">
  $(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
  });
</script>
Bootstrap - Пример настройки компонента tooltip с помощью атрибутов data-
Bootstrap - Пример настройки компонента tooltip с помощью атрибутов data-

Демострация примера (1)


Например, рассмотрим создание всплывающей подсказки с ссылками, которая будет вызываться при клике на элемент a:

<a href="#" data-toggle="tooltip" data-placement="bottom" data-trigger="click" data-html="true" data-title="Текст всплывающей подсказки, содержащий ссылки:<br><a href='https://yandex.ru'>Яндекс</a><br><a href='https://www.google.ru'>Google</a>">
  Ссылка с tooltip
</a>

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

Методы JavaScript компонента tooltip

В таблице приведены основные методы для компонента tooltip (всплывающей подсказки):

Метод Описание
.tooltip(параметры) Этот метод предназначен для инициализации элемента или элементов как компонента tooltip. Кроме этого данный метод может содержать параметры с помощью которых настраивается расположение и функциональность данного компонента. Например: $("#idelement").tooltip().
.tooltip('show') Метод, который отображает всплывающую подсказку у элемента. Например: $("#idelement").tooltip('show').
.tooltip('hide') Метод, который скрывает отображение подсказки у элемента. Например: $('#idelement').tooltip('hide').
.tooltip('toggle') Метод, который переключает подсказку у элемента. Т.е. если подсказа отображается, то скрывает её. Или если она скрыта, то отображает её. Например: $("#idelement").tooltip('toggle').
.tooltip('destroy') Этот метод скрывает и удаляет всплывающую подсказку у элемента. Например: $("#idelement").tooltip('destroy').

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

В следующем примере инициализируем элементы a как компонент tooltip, и настроим параметры: title, placement и delay.

<p class="tooltip-options">
  <a href="#">Пример tooltip</a>
</p>  
  
<script>
$(document).ready(function(){
  // инициализировать элементы a, находящиеся внутри элемента, имеющего класс .tooltip-options a, как компонент tooltip с параметрами title, placement и delay
  $(".tooltip-options a").tooltip({
    title : 'Текст всплывающей подсказки при отсутствии атрибута title.',
    placement: right,
    delay: { show: 1000, hide: 500 }
  });
});
</script>
Bootstrap - Пример настройки компонента tooltip с помощью JavaScript
Bootstrap - Пример настройки компонента tooltip с помощью JavaScript

Демострация примера (2)

Управление всплывающей подсказкой с помощью методов show(), hide(), toggle() и destroy()

На следующем примере будем управлять отображением подсказки с помощью js методов компонента tooltip:

<p class="tooltip-method">
  <a href="#" title="Демонстрация методов tooltip">Подсказка tooltip</a>
</p>  

<div>
  <p>Нажмите на следующие кнопки для управления tooltip с помощью его методов:</p>
  <input type="button" class="btn btn-primary show-tooltip" value="Show">
  <input type="button" class="btn btn-warning hide-tooltip" value="Hide">
  <input type="button" class="btn btn-success toggle-tooltip" value="Toogle">
  <input type="button" class="btn btn-danger destroy-tooltip" value="Destroy">
</div>   

<script>
$(document).ready(function(){
  $(".show-tooltip").click(function(){
    $(".tooltip-method a").tooltip('show');
  });
  $(".hide-tooltip").click(function(){
    $(".tooltip-method a").tooltip('hide');
  });
  $(".toggle-tooltip").click(function(){
    $(".tooltip-method a").tooltip('toggle');
  });
  $(".destroy-tooltip").click(function(){
    $(".tooltip-method a").tooltip('destroy');
  });
});
</script>
Bootstrap - Управление отображением компонента tooltip с помощью методов show(), hide(), toggle() и destroy()
Управление всплывающей подсказкой с помощью методов show(), hide(), toggle() и destroy()

Демострация примера (3)

События компонента tooltip

В следующей таблице перечислены события плагина tooltip (всплывающая подсказка):

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

Например, отобразим сообщение после того, как всплывающая подсказка становится видимой пользователю (событие shown.bs.tooltip):

<a href="#" class="tooltip-events" title="Текст всплывающей подсказки">
  Ссылка с tooltip
</a>

<script>
  // после загрузки страницы...
  $(function () { 
    //инициализировать элементы с классом .tooltip-events как компоненты tooltip
    $('.tooltip-events').tooltip('show');
    //подписаться на событие shown.bs.tooltip компонентов tooltip
    $('.tooltip-events').on('shown.bs.tooltip', function () { 
      alert("Предупреждающее сообщение при отображении ссылки");
    })
  });
</script>

Результат выполнения кода представим с помощью следующих изображений:

Ссылка, при поднесении к которой курсора отображается всплывающая подсказка
Ссылка, при поднесении к которой курсора отображается всплывающая подсказка
После поднесении курсора отображается всплывающая подсказка. Когда данная подсказка полностью отрисуется с помощью стилей CSS, то срабатывает событие shown.bs.tooltip, которое отображает на экране предупреждающее сообщение:
Изображение, на котором изображен результат выполнения события shown.bs.tooltip


   Bootstrap 0    32996 0

Комментарии (8)

  1. Сергей # 0
    Во втором примере, где приведен следующий javascript код
    <script type="text/javascript">
    $(document).ready(function(){
        $(".tooltip-examples a").tooltip();
        $(".tooltip-examples button").tooltip();
    });
    </script>
    </code
    я убрал у всех html-элементов атрибут data-toggle="tooltip".
    Работает и без него. Или этот тег нужен?
    
    Есть два вопроса.
    1. Можно ли менять фон tooltip, не правя css?
    2. В статьях код помещен в элегантные окошки. На моих тестовых страничках так не получается. Кроме тегов ‹code› и  ‹em› нужно еще что-то использовать?
    
    Спасибо
    1. Александр Мальцев # 0
      Атрибут data-toggle=«tooltip» нужен только для того, чтобы с помощью него инициализировать Tooltip.
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
      
      Если Вы инициализируете Tooltip другим способом, то данный атрибут использовать не надо. Т.е. инициализировать Tooltip можно не только с помощью данного атрибута, а вообще как угодно.
      Например:
      //инициализировать Tooltip у всех элементов button
      $(function () {
        $('button').tooltip()
      });
      
      В этом случае Tooltip будет инициализирован у всех элементов button. Добавлять атрибут data-toggle=«tooltip» к элементам в этой ситуации не будет иметь смысла, т.к. мы его для инициализации не используем.

      Установить цвета фона Tooltip можно с помощью переменной @tooltip-bg на странице Customize Twitter Bootstrap 3. После изменения значения переменной необходимо собрать сборку.
      Bootstrap 3 - изменение цвета фона Tooltip
      Или лучше изменить значение переменной LESS @tooltip-bg, как это сделать можно почитать тут:
      1. itchief.ru/lessons/bootstrap-3/bootstrap-3-configuring-the-platform-using-variables-in-less
      2. itchief.ru/lessons/bootstrap-3/bootstrap-3-installation-and-assembly-platform

      Код помещён в панели:
      <div class="alert alert-warning">
      ...
      </div>
      
    2. Сергей # 0
      Помогите не получается сделать подсказки 42.webbio.ru/
      1. ALEHAN # 0
        Существует ли какая то возможность избавиться от неприятного эффекта скачка вверх страницы при клике на тултип (вернее на текст-ссылку вызывающую тултип). Не важно каким методом (по клику или по наведению) вызывается подсказка, она все равно при клике бросает нас на верх, думаю виновата эта конструкция (<a href="#").
        1. ALEHAN # 0
          UPD решил через использование вместо тега a тег button со сбросом всех стилей для кнопки, что бы смотрелась как простой текст
        2. Olga Erushenko # 0
          Здравствуйте, как можно настроить размер шрифта подсказки?
          1. Александр Мальцев # 0
            Здравствуйте.
            Настройка стилей CSS tooltip осуществляется через класс tooltip-inner:
            .tooltip-inner {
              font-size: 20px;
            }
            
            1. Olga Erushenko # 0
              Спасибо. Очень помогли.

          Вы должны авторизоваться, чтобы оставлять комментарии.