Tour

Tour показывает шаг обучающего обхода: экран затемняется, над целевым элементом остаётся прозрачное окно, под ним стоит карточка с текстом шага и кнопками, стрелкой к цели. Цель — элемент или селектор; положение считается по прямоугольнику цели. Последовательность шагов ведёт продукт: компонент показывает один шаг.

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

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

Первое знакомство с экраном: показать, где лежит нужное, шаг за шагом.

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

Пояснение к одному элементу без затемнения — это Tooltip или Hint.
Сообщение, не привязанное к месту, — это Dialog или Toast.

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

tooltip — короткое пояснение по наведению
dialog — объяснение без привязки к элементу

Шаг обхода

Кнопка открывает шаг: затемнение, окно над кнопкой «Создать» и карточка с текстом.

<!--
  🟢

  Шаг обхода: кнопка открывает затемнение с окном над кнопкой «Создать» и
  карточку с текстом и кнопкой «Понятно».
-->

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

let open = $state(false);
let target = $state();
</script>

<div style="display: flex; gap: var(--sp-2); align-items: center;">
	<span bind:this={target}><Button variant="accent" icon="Plus">{t("Создать")}</Button></span>
	<Button variant="ghost" onclick={() => (open = true)}>{t("Показать подсказку")}</Button>
</div>

<Tour bind:open {target} label={t("Первая кампания")}>
	{#snippet children({ close })}
		<p style="margin: 0 0 var(--sp-1);">{t("Здесь создаётся первая кампания: название, формат и ставка.")}</p>
		<Button size="s" onclick={close}>{t("Понятно")}</Button>
	{/snippet}
</Tour>