TooltipТултип

Тултип используется для отображения дополнительного пояснительного текста или контекстной информации для определенного элемента, помогая пользователю лучше понять его функцию или назначение.

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

При необходимости импортируйте компонент:

import 'mdui/components/tooltip.js';

При необходимости импортируйте типы TypeScript:

import type { Tooltip } from 'mdui/components/tooltip.js';

Пример использования:

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Примеры

Обычный текстовый тултип

По умолчанию тултип отображает только текст. Содержимое тултипа можно задать через атрибут content.

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Исходный код

Также можно задать содержимое с помощью слота content.

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

Исходный код

Богатый тултип

Установите атрибут variant в значение rich, чтобы создать богатый тултип. Заголовок можно задать через атрибут headline, а содержимое — через content.

button

<mdui-tooltip
  variant="rich"
  headline="Rich tooltip"
  content="Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Исходный код

Также можно использовать слоты headline и content для задания заголовка и содержимого, а слот action — для кнопки действия.

button

Rich tooltip

Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.

Action

<mdui-tooltip variant="rich">
  <mdui-button>button</mdui-button>
  <div slot="headline">Rich tooltip</div>
  <div slot="content">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

Исходный код

Положение

Используйте атрибут placement для установки положения тултипа.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Исходный код

Способ вызова

Используйте атрибут trigger для установки способа вызова тултипа.

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Исходный код

Задержка открытия/закрытия

Когда способ вызова hover, можно задать задержку открытия и закрытия тултипа через атрибуты open-delay и close-delay (в миллисекундах).

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Исходный код

Отключенное состояние

Добавьте атрибут disabled, чтобы отключить тултип.

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Форма тултипа. По умолчанию `plain`. Возможные значения: `plain` — простой текст, подходит для однострочных подсказок `rich` — расширенный контент, может содержать заголовок, основной текст и кнопки действий
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Расположение тултипа. По умолчанию `auto`. Возможные значения: `auto` — автоматическое определение положения. При `variant="plain"` предпочтение отдаётся `top`; при `variant="rich"` — `bottom-right` `top-left` — слева сверху `top-start` — сверху, выравнивание по левому краю `top` — сверху, по центру `top-end` — сверху, выравнивание по правому краю `top-right` — справа сверху `bottom-left` — слева снизу `bottom-start` — снизу, выравнивание по левому краю `bottom` — снизу, по центру `bottom-end` — снизу, выравнивание по правому краю `bottom-right` — справа снизу `left-start` — слева, выравнивание по верхнему краю `left` — слева, по центру `left-end` — слева, выравнивание по нижнему краю `right-start` — справа, выравнивание по верхнему краю `right` — справа, по центру `right-end` — справа, выравнивание по нижнему краю
`open-delay`	`openDelay`	`number`	`150`
Задержка открытия тултипа при наведении мыши, в миллисекундах.
`close-delay`	`closeDelay`	`number`	`150`
Задержка закрытия тултипа при наведении мыши, в миллисекундах.
`headline`	`headline`	`string`	-
Заголовок тултипа. Доступно только при `variant="rich"`. Можно задать через `slot="headline"`.
`content`	`content`	`string`	-
Содержимое тултипа. Можно задать через `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Способ открытия тултипа, можно указать несколько значений через пробел. Возможные значения: `click` — открытие по клику `hover` — открытие при наведении мыши `focus` — открытие при фокусе `manual` — можно открывать и закрывать только программно, другие способы не указываются
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли тултип.
`open`	`open`	`boolean`	`false`
Определяет, отображать ли тултип.

События

Название
`open`
Срабатывает в начале показа тултипа. Можно отменить показ, вызвав `event.preventDefault()`.
`opened`
Срабатывает после завершения анимации показа тултипа.
`close`
Срабатывает в начале скрытия тултипа. Можно отменить скрытие, вызвав `event.preventDefault()`.
`closed`
Срабатывает после завершения анимации скрытия тултипа.

Slots

Название
(по умолчанию)
Целевой элемент для тултипа. Используется первый элемент в слоте по умолчанию.
`headline`
Заголовок тултипа. Действует только при `variant="rich"`.
`content`
Содержимое тултипа, может содержать HTML. Если нужен только простой текст, можно использовать свойство `content`.
`action`
Кнопки действий внизу тултипа. Действует только при `variant="rich"`.

CSS Parts

Название
`popup`
Контейнер тултипа.
`headline`
Заголовок.
`content`
Основной текст.
`action`
Кнопки действий.

Пользовательские CSS-свойства

Название
`--shape-corner-plain`
Размер скругления углов компонента при `variant="plain"`. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
`--shape-corner-rich`
Размер скругления углов компонента при `variant="rich"`. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
`--z-index`
Значение CSS `z-index` компонента.

Предыдущая глава

TextField Текстовое поле

Следующая глава

TopAppBar Верхняя панель приложения