Тултипы

Тултип обычно используется для добавления пояснений к иконкам. Его содержимое обычно представляет собой простой текст без изображений и форматирования.

Использование

Вызов через атрибуты
Вызов через JavaScript

Связанное чтение

Использование

Вызов через атрибуты

Этот способ не требует написания JavaScript-кода. Просто добавьте атрибут mdui-tooltip="options" к элементу, чтобы активировать плагин.

Пример

<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Печать'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Печать', position: 'top'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Печать', delay: 1000}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>

Вызов через JavaScript

Инициализация компонента:

// selector — это CSS-селектор или DOM-элемент.
// options — это параметры конфигурации, см. список параметров ниже.
var inst = new mdui.Tooltip(selector, options);

Запуск

Параметр

Имя параметра	Тип	По умолчанию	Описание
`position`	`string`	`auto`	Расположение тултипа. Допустимые значения: `auto`, `bottom`, `top`, `left`, `right`. При значении `auto` положение определяется автоматически. По умолчанию — снизу. Приоритет: `bottom` > `top` > `left` > `right`.
`delay`	`int`	`0`	Задержка перед появлением в миллисекундах.
`content`	`string`		Содержимое тултипа.

Метод

Имя метода	Описание
`open()`	Показать тултип Позволяет передавать параметры конфигурации для изменения содержимого при каждом открытии, например: `open({ content: 'новое содержимое' })`. Список параметров см. в разделе Параметры выше.
`close()`	Скрыть тултип
`toggle()`	Переключить состояние тултипа
`getState()`	Возвращает состояние тултипа. Всего существует четыре состояния (`opening`, `opened`, `closing`, `closed`).

Событие

Имя события	Описание	Параметры
`open.mdui.tooltip`	Событие срабатывает, когда начинается анимация открытия.	`event._detail.inst`: экземпляр
`opened.mdui.tooltip`	Событие срабатывает, когда анимация открытия завершена.
`close.mdui.tooltip`	Событие срабатывает, когда начинается анимация закрытия.
`closed.mdui.tooltip`	Событие срабатывает, когда анимация закрытия завершена.

Чипы

Снэкбары