Tooltip на кнопках

Tooltip в Carbon Components Svelte представляет собой всплывающую подсказку, которая отображает дополнительную информацию при наведении на элемент или фокусе на нём с клавиатуры. На кнопках tooltip используется для пояснения действий, которые не очевидны по тексту кнопки или иконке.

Импорт необходимых компонентов

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

import { Button } from 'carbon-components-svelte';
import { Tooltip } from 'carbon-components-svelte';
  • Button — стандартная кнопка Carbon, поддерживающая разные стили и состояния.
  • Tooltip — компонент для отображения всплывающих подсказок.

Простая реализация

Для базового использования tooltip оборачивают кнопку в компонент Tooltip или используют слот trigger:

<Tooltip text="Сохранить изменения">
  <Button kind="primary" size="md">Сохранить</Button>
</Tooltip>

Здесь text определяет текст подсказки, который будет отображаться при наведении курсора на кнопку. В этом примере кнопка имеет стандартный размер md и основной стиль primary.

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

Carbon Components Svelte поддерживает более гибкое управление tooltip через слоты trigger и content. Такой подход позволяет вставлять сложные элементы внутри подсказки:

<Tooltip>
  <svelte:fragment slot="trigger">
    <Button kind="secondary" size="sm">Инфо</Button>
  </svelte:fragment>
  <svelte:fragment slot="content">
    Подробная информация о функции кнопки.
  </svelte:fragment>
</Tooltip>

Преимущество слотов в том, что текст подсказки может содержать HTML-разметку, ссылки или даже другие компоненты Svelte.

Настройка позиции и задержки

Компонент Tooltip позволяет управлять расположением подсказки относительно кнопки через свойство align и временем задержки через delay:

<Tooltip text="Удалить файл" align="bottom" delay={300}>
  <Button kind="danger">Удалить</Button>
</Tooltip>
  • align принимает значения: top, bottom, left, right. Определяет, с какой стороны кнопки будет появляться подсказка.
  • delay задаёт задержку в миллисекундах перед появлением tooltip при наведении.

Состояния кнопок и взаимодействие с tooltip

Tooltip корректно работает со всеми состояниями кнопок: активной, неактивной (disabled) и загрузки (loading). Особенность для отключённых кнопок: нативные события мыши не срабатывают на disabled, поэтому tooltip оборачивается в <div>:

<Tooltip text="Кнопка недоступна" align="top">
  <div>
    <Button kind="primary" disabled>Сохранить</Button>
  </div>
</Tooltip>

Без дополнительного обёртывания tooltip для отключённых кнопок не будет отображаться.

Стилизация и кастомизация

В Carbon Components Svelte можно изменять внешний вид tooltip через CSS-переменные и классы:

<Tooltip text="Настройка темы" class="custom-tooltip">
  <Button kind="secondary">Тема</Button>
</Tooltip>

<style>
  .custom-tooltip {
    --cds-tooltip-background: #0f62fe;
    --cds-tooltip-text-color: #ffffff;
    --cds-tooltip-font-size: 0.875rem;
  }
</style>
  • --cds-tooltip-background — цвет фона подсказки.
  • --cds-tooltip-text-color — цвет текста.
  • --cds-tooltip-font-size — размер шрифта.

Tooltip с иконками

Часто подсказка используется на кнопках с иконками без текста. В таких случаях важно сохранить доступность для экранных читалок с помощью атрибута aria-label на кнопке:

<Tooltip text="Поиск">
  <Button kind="ghost" icon="search" aria-label="Поиск"></Button>
</Tooltip>

Доступность и клавиатура

Tooltip полностью совместим с клавиатурным управлением. Он появляется при фокусе на кнопке и скрывается при потере фокуса. Для обеспечения доступности следует:

  • Использовать aria-label для кнопок без текста.
  • Проверять контраст текста tooltip с фоном.
  • Не перегружать подсказку длинным текстом — лучше краткая, ёмкая информация.

Комбинирование нескольких tooltip

В интерфейсах с множеством кнопок можно использовать несколько компонентов Tooltip на одном экране, при этом каждый tooltip работает независимо. Важно, чтобы у них были уникальные слоты и корректная разметка для предотвращения конфликтов:

<Tooltip text="Сохранить">
  <Button kind="primary">Сохранить</Button>
</Tooltip>

<Tooltip text="Отменить">
  <Button kind="secondary">Отмена</Button>
</Tooltip>

Итоговые рекомендации по использованию tooltip на кнопках

  • Для простых подсказок используйте проп text.
  • Для сложного контента применяйте слоты trigger и content.
  • Обязательно учитывайте доступность: aria-атрибуты и контраст.
  • Для отключённых кнопок оборачивайте Button в <div>.
  • Настраивайте позицию через align и задержку через delay.
  • Используйте CSS-переменные для стилизации под дизайн проекта.

Tooltip на кнопках Carbon Components Svelte обеспечивает ясную и наглядную подачу информации о действиях пользователя, сохраняя совместимость с клавиатурой и экранными читалками, а гибкость слотов и стилей позволяет легко адаптировать внешний вид и поведение под любые интерфейсные задачи.

Оглавление