https://itchief.ru/bootstrap/tooltips

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

Bootstrap – Tooltips (всплывающие подсказки) | ИТ Шеф

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

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

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

Компонент 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.

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

Кнопка с подсказкой ...

Код скопирован!

Кнопка с подсказкой ...

Код скопирован!

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

текст ссылки ... некоторый текст ...

Код скопирован!

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

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или 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.
Значение по умолчанию:

'

'

Этот параметр устанавливает 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 осуществляется следующим образом:

Кнопка с tooltip ...

Код скопирован!

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

Подсказка справа Подсказка снизу ...

Код скопирован!

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

Кнопка с подсказкой ...

Код скопирован!

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

Ссылка с tooltip ...

Код скопирован!

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

Пользователь\_1 Пользователь\_2 ...

Код скопирован!

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

Пользователь\_1 Пользователь\_2 ...

Код скопирован!

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

...

Код скопирован!

Методы плагина 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):

Кнопка с tooltip

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

show hide toggle destroy

Код скопирован!

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

Кнопка с tooltip

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

show hide toggle enable disable toggleEnabled update dispose

Код скопирован!

События плагина 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.

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

...

Код скопирован!

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

Изменить некоторые параметры подсказки можно посредством переопределения её 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; /\* радиус скругдения углов \*/ } ... Кнопка с подсказкой

Код скопирован!