В этой статье познакомимся с процессом создания подсказок посредством Bootstrap 3 и 4. Эти подсказки можно добавлять к любым HTML-элементам (изображениям, текстовым элементам, ссылкам и др.).

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

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

Bootstrap Tooltips - Всплывающие подсказки для ссылок

Компонент Tooltip в Bootstrap 3 и 4 построен с помощью CSS и JavaScript.

Компонент Tooltips в Bootstrap 4 для позиционирования подсказок использует стороннюю библиотеку Popper.js. Это означает что файл этой библиотеки (popper.js) необходимо подключить перед bootstrap.js. Кроме этого варианта, можно ещё воспользоваться файлом bootstrap.bundle.min.js или bootstrap.bundle.js. Данный файл включает в себя bootstrap.js и popper.js.

При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла tooltips.js в проект ещё включить utils.js.

Тонкости использования компонента Tooltips

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

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

Укажите container: 'body' чтобы избежать проблем рендеринга этого компонента в более сложных компонентах (группы input, группы кнопок и др.). В Bootstrap 4 данное значение для параметра container установлено по умолчанию.

Отображение всплывающих подсказок на скрытых элементах не работает.

Всплывающая подсказка для не активного элемента (т.е. имеющего класс disabled или атрибут disabled) должна вызываться на его родителе.

При вызове на гиперссылках, которые состоят из нескольких строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap, на элементе a, чтобы отключить такое поведение.

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

Добавление подсказки к элементу

Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title и вызова для него метода tooltip.

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

<!-- Bootstrap 3 -->
<button id="btn-tooltip" class="btn btn-danger" title="текст всплывающей подсказки">Кнопка с подсказкой</button>
...
<script>
    $('#btn-tooltip').tooltip();
</script>
Bootstrap 4 - Кнопка с подсказкой
<!-- Bootstrap 4 -->
<button id="btn-tooltip" class="btn btn-danger" title="текст всплывающей подсказки">Кнопка с подсказкой</button>
...
<script>
    $('#btn-tooltip').tooltip();
</script>

Чтобы было более просто выбрать все элементы на странице, для которых необходимо вызвать метод tooltip, к ним, например, можно добавить атрибут data-toggle="tooltip".

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

Подсказка для элемента, имеющего состояние disabled

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.

Подсказка для элемента, имеющего состояние disabled
<!-- Bootstrap 4 -->
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="подсказка для элемента, находящимся в состоянии disabled">
    <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Не активная кнопка</button>
</span>

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

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

Имя Описание
animation Тип: boolean. Значение по умолчанию: true. Определяет необходимо ли появление и скрытие всплывающей подсказки выполнять с анимацией.
container Тип: string | element | false. Значение по умолчанию: false. Определяет элемент в который необходимо помещать код всплывающей подсказки.
Например, если указать этому параметру значение "body", то код подсказки будет добавляться в конец элемента body. А если например, значение "#tooltip", то в элемент, имеющий id, равный tooltip.
По умолчанию, Bootstrap 3 HTML-код tooltip помещает после элемента, который вызвал эту подсказку, а Bootstrap 4 - в конец элемента body.
delay Тип: number | object. Значение по умолчанию: 0.
Устанавливает время задержки перед отображением и скрытием всплывающей подсказки в миллисекундах. Не применяется к параметру trigger со значением manual. При указании одного значения (числа), интервал задержки устанавливается одинаковым как перед отображением, так и перед скрытием. Для установки разного времени, значение параметра указывается в формате объекта. Например, delay: { show: 500, hide: 100 }. В этом случае пауза перед отображением будет 500 мс, а перед скрытием – 100 мс.
html Тип: boolean. Значение по умолчанию: false. Определяет можно ли в содержимом подсказки (tooltip) использовать HTML теги. Значение true данного параметра соответственно включает эту возможность, а false - отключает.
placement Тип: string | function. Значение по умолчанию: "top". Этот параметр позволяет настроить расположение всплывающей подсказки относительно элемента. Для установки доступны следующие значения: "auto", "top", "bottom", "left", "right". Значение auto предназначено для автоматического ориентирования подсказки.
Кроме вышеприведённых значений для определения положения подсказки можно использовать функцию. Она получает 2 аргумента. В качестве первого аргумента - DOM-узел всплывающей подсказки, а в качестве второго - DOM-элемент, вызвавший её. В контексте функции ключевое слово this указывает на экземпляр tooltip.
selector Тип: string | false. Значение по умолчанию: false.
Этот параметр предназначен для инициализации подсказок у элементов, которые будут создаваться динамически после загрузки страницы.
В качестве объекта, для которого необходимо вызвать данный метод (tooltip) нужно выбрать элемент, который всегда будет присутствовать на странице. В большинстве случаев, в качестве такого элемента выбирают document или body.
В качестве значения этого параметра необходимо указать селектор, на основе которого будет осуществляться фильтрация потомков, для которых необходимо инициализировать подсказку.
template Тип: string.
Значение по умолчанию:
'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
Этот параметр устанавливает HTML-код, который будет использоваться при создании всплывающей подсказки. Текст всплывающей подсказки будет вставлен в элемент с классом tooltip-inner. Элемент с классом arrow используется для создания треугольника у всплывающей подсказки. Обёрточный элемент подсказки должен иметь класс tooltip и атрибут role="tooltip".
title Тип: string | element | function. Значение по умолчанию: "".
Устанавливает значение подсказки по умолчанию, если атрибут title не указан. Если в качестве значения указана функция, то она будет вызвана со ссылкой на элемент, к которому прикреплена эта подсказка.
trigger Тип: string. Значение по умолчанию: "hover focus".
Данный параметр определяет события, при которых подсказка будет запускаться. Для установки доступно 4 события: "click" (при клике), "hover" (при наведении), "focus" (при нахождении элемента в фокусе) и "manual" ( самостоятельное определение). Кроме этого возможно комбинирование событий. В этом случае они указываются через пробел.
Значение "manual" указывает, что всплывающая подсказка будет запускаться программно с помощью методов tooltip ('show'), tooltip ('hide') и tooltip ('toggle'). Это значение нельзя комбинировать с другими.
viewport Имеется только в Bootstrap 3.
Тип: string | object | function. Значение по умолчанию: { selector: 'body', padding: 0 }.
Устанавливает границы в пределах которых должна отображаться всплывающая подсказка. Примеры значений: viewport: '#viewport' или { "selector": "#viewport", "padding": 0 }.
Если в качестве значения указана функция, то она вызывается с единственным аргументом, значение которого равно DOM-узлу, который вызвал всплывающую подсказку. В контексте функции ключевое слово this указывает на экземпляр tooltip.
offset Имеется только в Bootstrap 4.
Тип: number | string. Значение по умолчанию: 0.
Этот параметр позволяет настроить смещение всплывающей подсказки относительно её цели. В качестве значения можно указать одно значение (Number или String) или несколько значений в виде String, разделенных запятой.
fallbackPlacement Имеется только в Bootstrap 4.
Тип: string | array. Значение по умолчанию: 'flip'.
Этот параметр определяет, как необходимо изменить положение всплывающей подсказки, когда она начинает перекрывать свой ссылочный элемент. Это может flip (флип), clockwise (по часовой стрелки), counterclockwise (против часовой стрелки) или массив, содержащий список допустимых мест размещения.
boundary Имеется только в Bootstrap 4.
Тип: string | element. Значение по умолчанию: 'scrollParent'.
Свойство boundary определяет как должно вести содержимое подсказки, если оно выходит за допустимые границы. В качестве значения можно использовать 'viewport', 'window', 'scrollParent', или ссылку на HTML-элемент (только JavaScript).

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

<!-- Bootstrap 4 -->
<button class="btn btn-secondary" data-toggle="tooltip">
    Кнопка с tooltip
</button>
...
<script>
// инициализация всплывающих подсказок с настройкой параметров title, placement и delay.
$('[data-toggle="tooltip"]').tooltip({
    title : 'Текст всплывающей подсказки при отсутствии атрибута data-title.',
    placement: 'right',
    delay: { show: 300, hide: 1000 }
});
</script>

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

<!-- Bootstrap 4 -->
<!-- Установка placement с помощью data-атрибута -->
<button class="btn btn-danger btn-tooltip" data-toggle="tooltip" data-placement="right" title="текст всплывающей подсказки">Подсказка справа</button>
<!-- Установка placement с помощью JavaScript -->
<button class="btn btn-warning btn-tooltip-bottom" title="текст всплывающей подсказки">Подсказка снизу</button>
...
<script>
// инициализация всех элементов по селектору [data-toggle="tooltip"]
$('[data-toggle="tooltip"]').tooltip();

// инициализация подсказок по селектору .btn-tooltip-bottom и установки им в качестве расположения значение 'bottom'
$('.btn-tooltip-bottom').tooltip({
    placement: 'bottom'
});
</script>

Пример, в котором установка расположения подсказки осуществляется с помощью функции:

<!-- Bootstrap 4 -->
<button id="myTooltip" class="btn btn-warning" title="текст всплывающей подсказки">Кнопка с подсказкой</button>
...
<script>
$('#myTooltip').tooltip({
    delay: { show: 500, hide: 200 },
    placement: function(tip, element) { //$this - экземпляр tooltip
        // tip - DOM-узел всплывающей подсказки
        // element - DOM-элемент, который вызвал эту подсказку
        // получаем JavaScript объект содержащий координаты элемента element
        var position = $(element).position();
        /* если его left-координата меньше или равно 300px, то подсказку будем показывать снизу от элемента, иначе слева от элемента */
        if (position.left <= 300) {
            return "bottom";
        } else {
            return "left";
        }
    }
});
</script>

Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):

Bootstrap 4 Tooltips - Пример
<!-- Bootstrap 4 -->
<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>
// инициализация всплывающих подсказок
$('[data-toggle="tooltip"]').tooltip();
// отмена для ссылок с атрибутом data-trigger="click" стандартного поведения
$('a[data-trigger="click"]').click(function(e){
    e.preventDefault();
})
</script>

Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):

Bootstrap 4 Tooltips - Пример
<!-- Bootstrap 4 -->
<a class="btn btn-secondary" href="#" data-toggle="tooltip" data-html="true" data-title="Аватар пользователя:<img class='d-block m-1 mx-auto' src='/examples/images/avatar1.jpg'>">
	Пользователь_1
</a>
<a  class="btn btn-secondary" href="#" data-toggle="tooltip" data-html="true" data-title="Аватар пользователя:<img class='d-block m-1 mx-auto' src='/examples/images/avatar2.jpg'>">
	Пользователь_2
</a>
...
<script>
// инициализация всплывающих подсказок
$('[data-toggle="tooltip"]').tooltip();
</script>

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

Bootstrap 4 Tooltips - Пример
<!-- Bootstrap 4 -->
<button class="btn btn-danger tooltip-profile" data-toggle="tooltip" data-title="Привет!" data-avatar="avatar1.jpg">Пользователь_1</button>
<button class="btn btn-danger tooltip-profile" data-toggle="tooltip" data-title="Как дела?" data-avatar="avatar2.jpg">Пользователь_2</button>
...
<script>
// новый шаблон всплывающей подсказки
var tooltipTemplate = ['<div class="tooltip" role="tooltip">',
    '<div class="arrow"></div>',
    '<img class="d-block m-1 mx-auto rounded" src="" style="height: 2rem;">',
    '<div class="tooltip-inner">',
    '</div>',
    '</div>'].join('');
// инициализируем всплывающие подсказки с шаблоном tooltipTemplate
$('.tooltip-profile').tooltip({
    template: tooltipTemplate
});
// изменяем src изображения при вставке всплывающей подсказки в DOM 
$('.tooltip-profile').on('inserted.bs.tooltip', function (e) {
    var id = $(this).attr('aria-describedby');
    $('#'+id).find('img').attr('src','/examples/images/'+$(this).attr('data-avatar'));
})
</script>

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

Bootstrap 4 Tooltips - Инициализация всплывающей подсказки для динамических элементов
<!-- Bootstrap 4 -->
<div class="my-3">
    <button id="add" class="btn btn-danger">
        Добавить на страницу кнопку с tooltip
    </button>
</div>
<div id="d-button">Динамическая кнопка будет вставлена здесь:</div>
...
<script>
// инициализация всплывающих подсказок
$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});
// HTML-код кнопки
var button = '<button class="btn btn-info" data-toggle="tooltip" title="текст всплывающей подсказки">' +
    'Кнопка с tooltip' +
    '</button>';
// при нажатии на элемент с id="add" на страницу будет добавлена кнопка после элемента id="d-button"
$('#add').click(function () {
    $('#d-button').after(button);
});
</script>

Методы плагина Tooltips

Методы плагина Tooltips приведены в таблице.

Имя Описание
.tooltip(options) Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.
.tooltip('show') Метод, который включает отображение всплывающей подсказки у элемента.
.tooltip('hide') Метод, который убирает отображение всплывающей подсказки у элемента.
.tooltip('toggle') Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.
.tooltip('destroy') Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.
.tooltip('enable') Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.
.tooltip('disable') Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром 'enable' или 'toggleEnabled'.
.tooltip('toggleEnabled') Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.
.tooltip('update') Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.
.tooltip('dispose') Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.

Пример использование методов для управления всплывающими подсказками (Bootstrap 3):

<!-- Bootstrap 3 -->
<button class="btn btn-success" data-toggle="tooltip" title="текст всплывающей подсказки">
    Кнопка с tooltip
</button>

<p>Кнопки с помощью которых вы можете вызвать тот или иной метод всплывающей подсказки:</p>
<button type="button" class="btn btn-primary action" data-action="show">show</button>
<button type="button" class="btn btn-primary action" data-action="hide">hide</button>
<button type="button" class="btn btn-primary action" data-action="toggle">toggle</button>
<button type="button" class="btn btn-primary action" data-action="destroy">destroy</button>
	
<script>
$(function () {
    // инициализация всплывающих подсказок
    $('[data-toggle="tooltip"]').tooltip();
    // при клике на кнопке с классом action выполнить метод для всплывающёй подсказке метод указанный в атрибуте data-action
    $('.action').click(function () {
        $('[data-toggle="tooltip"]').tooltip($(this).attr('data-action'))
    });
});
</script>

Пример использование методов для управления всплывающими подсказками (Bootstrap 4):

<!-- Bootstrap 4 -->
<button class="btn btn-secondary" data-toggle="tooltip" title="текст всплывающей подсказки">
    Кнопка с tooltip
</button>

<p>Кнопки с помощью которых вы можете вызвать тот или иной метод всплывающей подсказки:</p>
<button type="button" class="btn btn-primary action" data-action="show">show</button>
<button type="button" class="btn btn-primary action" data-action="hide">hide</button>
<button type="button" class="btn btn-primary action" data-action="toggle">toggle</button>
<button type="button" class="btn btn-primary action" data-action="enable">enable</button>
<button type="button" class="btn btn-primary action" data-action="disable">disable</button>
<button type="button" class="btn btn-primary action" data-action="toggleEnabled">toggleEnabled</button>
<button type="button" class="btn btn-primary action" data-action="update">update</button>
<button type="button" class="btn btn-primary action" data-action="dispose">dispose</button>
	
<script>
$(function () {
    // инициализация всплывающих подсказок
    $('[data-toggle="tooltip"]').tooltip();
    // при клике на кнопке с классом action выполнить метод для всплывающёй подсказке метод указанный в атрибуте data-action
	$('.action').click(function () {
        $('[data-toggle="tooltip"]').tooltip($(this).attr('data-action'))
    });
});
</script>

События плагина Tooltips

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

Имя Описание
show.bs.tooltip Событие возникает после вызова метода show().
shown.bs.tooltip Это событие генерируется, когда подсказка становится полностью видимой пользователю (после завершения CSS переходов).
hide.bs.tooltip Событие возникает после вызова метода hide().
hidden.bs.tooltip Это событие генерируется, когда подсказка становится полностью скрытой от пользователя (после завершения CSS переходов).
inserted.bs.tooltip Это событие вызывается после события show.bs.tooltip, когда шаблон подсказки будет добавлен в DOM.

Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):

Bootstrap 4 Tooltips - Пример работы с событиями
<!-- Bootstrap 4 -->
<div class="row">
    <div class="col-4 text-center">
        <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="текст всплывающей подсказки">
            Кнопка с tooltip
        </button>
    </div>
    <div class="col-6">
        <ul class="log text-left" style="height: 200px; overflow-y: auto;"></ul>
    </div>
</div>
...
<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip();
    var t = function () {
        var now = new Date();
        var m = now.getMinutes();
        var s = now.getSeconds();
        if (m < 10) m = '0' + m;
        if (s < 10) s = '0' + s;
        return m + ':' + s;
    };
    $('[data-toggle="tooltip"]').on('show.bs.tooltip', function () {
        $('.log').prepend('<li>' + t() + ' - show.bs.tooltip</li>');
    });
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
        $('.log').prepend('<li>' + t() + ' - shown.bs.tooltip</li>');
    });
    $('[data-toggle="tooltip"]').on('hide.bs.tooltip', function () {
        $('.log').prepend('<li>' + t() + ' - hide.bs.tooltip</li>');
    });
    $('[data-toggle="tooltip"]').on('hidden.bs.tooltip', function () {
        $('.log').prepend('<li>' + t() + ' - hidden.bs.tooltip</li>');
    });
    $('[data-toggle="tooltip"]').on('inserted.bs.tooltip', function () {
        $('.log').prepend('<li>' + t() + ' - inserted.bs.tooltip</li>');
    });
});
</script>

Как изменить цвет и ширину подсказки с помощью CSS

Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.

Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):

Bootstrap 4 Tooltips - Изменение цвета и ширины подсказки с помощью CSS
<!-- Bootstrap 4 -->
/* CSS */
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #17a2b8; /* цвет стрелочки (по умолчанию #000)*/
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #17a2b8; /* цвет стрелочки (по умолчанию #000)*/
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #17a2b8; /* цвет стрелочки (по умолчанию #000) */
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #17a2b8; /* цвет стрелочки (по умолчанию #000) */
}
.tooltip-inner {
    max-width: 250px; /* максимальная ширина подсказки (по умолчанию 200px) */
    color: #fff; /* цвет шрифта */
    background-color: #17a2b8; /* цвет фона (по умолчанию #000) */
    border-radius: 0.25rem; /* радиус скругдения углов */
}
...
<button id="btn-tooltip" class="btn btn-info" title="очень длинный текст всплывающей подсказки...">
    Кнопка с подсказкой
</button>