Компонент Tooltip

Компонент Tooltip используется для отображения вспомогательной информации при наведении на элемент, фокусе или клике. В SvelteKit его реализация опирается на реактивность и привязку состояний, что обеспечивает плавное управление показом и скрытием подсказок без прямого манипулирования DOM.

Структура компонента

Базовый Tooltip состоит из двух ключевых элементов:

  1. Целевой элемент (target) – элемент, над которым появляется подсказка.
  2. Подсказка (tooltip) – контейнер с информацией, которая отображается при активации target.

Пример структуры:

<div class="tooltip-container" on:mouseenter={show} on:mouseleave={hide}>
  <button>Наведи на меня</button>
  {#if visible}
    <div class="tooltip-content">
      Это подсказка
    </div>
  {/if}
</div>
  • visible – реактивная переменная состояния, управляющая видимостью.
  • show и hide – функции для изменения состояния visible.

Управление видимостью

Использование реактивных переменных Svelte позволяет управлять состоянием Tooltip без прямых вызовов document.querySelector или classList.

<script>
  let visible = false;

  function show() {
    visible = true;
  }

  function hide() {
    visible = false;
  }
</script>

Для более сложных сценариев можно добавлять задержку появления и исчезновения, используя setTimeout:

function show(delay = 200) {
  setTimeout(() => visible = true, delay);
}

function hide(delay = 200) {
  setTimeout(() => visible = false, delay);
}

Позиционирование Tooltip

Одной из ключевых задач является правильное позиционирование подсказки относительно target. В SvelteKit UI библиотеках часто используют события mousemove или привязку координат через bind:this:

<script>
  let targetEl;
  let coords = { top: 0, left: 0 };

  function updatePosition(event) {
    coords = {
      top: event.clientY + 10,
      left: event.clientX + 10
    };
  }
</script>

<div bind:this={targetEl} on:mousemove={updatePosition}>
  <button>Наведи на меня</button>
</div>

{#if visible}
  <div class="tooltip-content" style="top:{coords.top}px; left:{coords.left}px; position:absolute;">
    Подсказка рядом с курсором
  </div>
{/if}

Такой подход обеспечивает динамическое следование подсказки за курсором.

Анимации и переходы

Svelte предоставляет встроенные транзишены через директиву transition, что позволяет создавать плавное появление и исчезновение Tooltip:

<script>
  import { fade, scale } from 'svelte/transition';
</script>

{#if visible}
  <div class="tooltip-content" transition:fade={{ duration: 200 }} transition:scale={{ start: 0.8, duration: 200 }}>
    Анимированная подсказка
  </div>
{/if}
  • fade – плавное появление/исчезновение.
  • scale – эффект увеличения/уменьшения размера при появлении.

Стилизация

Стили Tooltip часто задаются через CSS-классы с учетом позиционирования и внешнего вида:

.tooltip-container {
  display: inline-block;
  position: relative;
}

.tooltip-content {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
  z-index: 1000;
}

Для удобства управления можно добавить варианты расположения подсказки:

<div class="tooltip-content {position}">
  Текст подсказки
</div>
.tooltip-content.top { transform: translateY(-100%); }
.tooltip-content.bottom { transform: translateY(100%); }
.tooltip-content.left { transform: translateX(-100%); }
.tooltip-content.right { transform: translateX(100%); }

Расширенные возможности

  1. Поддержка клика для открытия – вместо hover можно управлять видимостью через события click и focus.
  2. Асинхронное содержимое – Tooltip может содержать динамический контент, загружаемый через API.
  3. Управление несколькими Tooltip – для групп элементов удобно создавать глобальный store, который хранит состояние активной подсказки.
<script>
  import { writable } from 'svelte/store';
  export const activeTooltip = writable(null);

  function toggleTooltip(id) {
    activeTooltip.update(current => current === id ? null : id);
  }
</script>

Доступность (Accessibility)

Для соблюдения стандартов доступности:

  • Использовать атрибуты aria-describedby или aria-label.
  • Обеспечивать возможность открытия через клавиатуру (фокус + Enter/Space).
  • Проверять контраст текста и фона для читаемости.
<button aria-describedby="tooltip1">Наведи на меня</button>
<div id="tooltip1" role="tooltip">
  Доступная подсказка
</div>

Интеграция с UI библиотеками

Многие SvelteKit UI библиотеки, такие как Svelte Material UI, Carbon Components Svelte, Shadcn Svelte, предоставляют готовые Tooltip-компоненты с расширенной функциональностью:

  • Автоматическое позиционирование с учетом края экрана.
  • Настраиваемые анимации и задержки.
  • Стили в соответствии с выбранной дизайн-системой.

Использование этих компонентов сокращает ручное управление состояниями и позиционированием, сохраняя при этом реактивность и производительность SvelteKit.

Этот подход к реализации Tooltip в SvelteKit сочетает реактивность, плавные анимации и удобное управление состояниями, обеспечивая высокую гибкость и соответствие современным стандартам UI.

Оглавление