Tooltip

Показує контекстну інформацію під час наведення або фокусу.

Живе демо

Розміщення

З іконками

Власний вміст

Із затримкою

Використання

<template>
  <!-- Simple text tooltip -->
  <orio-tooltip text="Hello World">
    <orio-button variant="secondary">Hover me</orio-button>
  </orio-tooltip>

  <!-- Custom content slot -->
  <orio-tooltip placement="top">
    <orio-button variant="secondary">Hover me</orio-button>
    <template #content>
      <div>Custom HTML content</div>
    </template>
  </orio-tooltip>

  <!-- With delay -->
  <orio-tooltip text="Delayed" :delay="300">
    <orio-button variant="secondary">Hover me</orio-button>
  </orio-tooltip>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
text	string	undefined	Текст підказки (якщо не використовується слот content)
placement	'top' | 'bottom' | 'left' | 'right'	'top'	Позиція підказки відносно тригера
delay	number	500	Затримка перед показом підказки (мс)
disabled	boolean	false	Вимкнути підказку
offset	number	8	Відстань від елемента-тригера (px)

Слоти

Слот	Опис
default	Елемент-тригер
content	Власний вміст підказки (перекриває проп text)

Можливості

• Автоматичне позиціювання зі стрілкою-вказівником
• Показується під час наведення та фокусу (доступно з клавіатури)
• Телепортується в body, щоб уникнути проблем із z-index
• Оновлює позицію під час прокручування та зміни розміру
• Налаштовувана затримка
• Підтримка власного вмісту через слот
• Темна тема за замовчуванням