Tooltip

Tooltip появляется по наведению или клавиатурному фокусу и даёт одну короткую неинтерактивную подсказку.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

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

Не использовать:

Текст необходим для выполнения задачи — покажи его постоянно.
Внутри нужны ссылка, кнопка или другой интерактивный элемент — используй Popover.
Нужно сообщить результат события — используй Alert или Toast.

Альтернативы:

popover — Popover допускает интерактивное содержимое и открывается явным действием.
alert — Alert остаётся видимым и сообщает результат рядом с причиной.

Пояснение действия

Короткий текст уточняет результат кнопки.

<!--
  🟢

  Базовый Tooltip поясняет уже понятную кнопку короткой фразой.
  Пузырь появляется по наведению и клавиатурному фокусу одного trigger.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Tooltip from "$lib/ui/Tooltip.svelte";
</script>

<Tooltip text={t("Скачивает отчёт в текущем формате")}>
	{#snippet trigger({ props })}
		<Button {...props}>{t("Скачать отчёт")}</Button>
	{/snippet}
</Tooltip>

Размещение

Предпочтительная сторона подстраивает пузырь к доступному месту.

<!--
  🟢

  Пример размещения переносит Tooltip вправо от короткой кнопки.
  Текстовая aria-label остаётся у trigger и не зависит от видимости подсказки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Tooltip from "$lib/ui/Tooltip.svelte";
import Info from "phosphor-svelte/lib/Info";
</script>

<Tooltip text={t("Данные обновляются один раз в сутки")} side="right">
	{#snippet trigger({ props })}
		<Button short aria-label={t("О частоте обновления")} {...props}>
			{#snippet leadingIcon()}<Info />{/snippet}
		</Button>
	{/snippet}
</Tooltip>