Tooltip

Всплывающее окно, отображающее информационный текст при наведении, клике, фокусе или правом клике на элементе.

Basic

<VxTooltip content="This is a tooltip">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Theme

Тёмная (по умолчанию) и светлая темы.

<VxTooltip content="Dark theme" theme="dark">...</VxTooltip>
<VxTooltip content="Light theme" theme="light">...</VxTooltip>

Custom Color

Задайте любой цвет фона и текста.

<VxTooltip content="Blue" color="#3b82f6" text-color="#fff" arrow>
  <VxButton>Blue</VxButton>
</VxTooltip>

<VxTooltip content="Green" color="#22c55e" text-color="#fff" arrow>
  <VxButton>Green</VxButton>
</VxTooltip>

<VxTooltip content="Gradient" color="linear-gradient(135deg, #667eea, #764ba2)" text-color="#fff">
  <VxButton>Gradient</VxButton>
</VxTooltip>

Arrow

Показать направляющую стрелку, указывающую на триггер.

<VxTooltip content="With arrow" arrow>
  <VxButton>Hover me</VxButton>
</VxTooltip>

<VxTooltip content="Light arrow" arrow theme="light">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Trigger

Поддерживает триггеры hover (по умолчанию), click, focus и contextmenu.

<VxTooltip content="Hover" trigger="hover">...</VxTooltip>
<VxTooltip content="Click" trigger="click">...</VxTooltip>
<VxTooltip content="Focus" trigger="focus">...</VxTooltip>
<VxTooltip content="Right-click" trigger="contextmenu">...</VxTooltip>

v-model

Программно управляйте видимостью tooltip через v-model.

<script setup>
const visible = ref(false)
</script>

<VxTooltip v-model="visible" content="Controlled tooltip">
  <VxButton>Target</VxButton>
</VxTooltip>

<VxButton @click="visible = !visible">Toggle</VxButton>

Before Show Hook

Выполните асинхронную проверку перед появлением tooltip. Верните false или выбросьте исключение, чтобы заблокировать показ.

<script setup>
async function check() {
  const ok = await verifyPermission()
  return ok
}
</script>

<VxTooltip content="Allowed!" :before-show="check">
  <VxButton>Guarded</VxButton>
</VxTooltip>

Auto Close

Автоматически закрывать tooltip через заданный таймаут (в мс).

<VxTooltip content="Disappears in 2s" :auto-close="2000">
  <VxButton>Auto Close</VxButton>
</VxTooltip>

Copyable

Клик по tooltip копирует его текст в буфер обмена.

<VxTooltip content="npm install veloxui" copyable @copy="onCopy">
  <code>npm install veloxui</code>
</VxTooltip>

Loading

Показать индикатор загрузки внутри tooltip.

<VxTooltip loading>
  <VxButton>Loading</VxButton>
</VxTooltip>

Persistent (v-show)

Оставляет DOM-узел tooltip в документе при скрытии. Полезно для производительности, когда tooltip часто переключается.

<VxTooltip content="I stay in the DOM" persistent>
  <VxButton>Persistent</VxButton>
</VxTooltip>

Teleport

Переместите tooltip в body, чтобы обойти контейнеры с overflow: hidden.

<div style="overflow: hidden;">
  <VxTooltip content="I escape!" teleport-to="body">
    <VxButton>Teleported</VxButton>
  </VxTooltip>
</div>

Content Slot

Используйте слот #content для насыщенного содержимого tooltip.

<VxTooltip theme="light" arrow>
  <template #content>
    <div>
      <strong>Pro tip</strong>
      <p>Rich content in tooltips</p>
    </div>
  </template>
  <VxButton>Rich Content</VxButton>
</VxTooltip>

Raw HTML

Отрисовывайте HTML-строки через prop raw.

<VxTooltip content="<strong>bold</strong> and <em>italic</em>" raw>
  <VxButton>Raw HTML</VxButton>
</VxTooltip>

Always Visible

<VxTooltip content="I'm always here" always>
  <VxButton>Always Visible</VxButton>
</VxTooltip>

Delay

Настройте задержки показа и скрытия в миллисекундах.

<VxTooltip content="Slow" :show-delay="500">...</VxTooltip>
<VxTooltip content="Instant" :show-delay="0" :hide-delay="0">...</VxTooltip>

Non-Enterable

Tooltip сразу скрывается, когда курсор уходит с триггера.

<VxTooltip content="Enterable" :enterable="true">...</VxTooltip>
<VxTooltip content="Not enterable" :enterable="false">...</VxTooltip>

Disabled

<VxTooltip content="Hidden" disabled>
  <VxButton disabled>Disabled</VxButton>
</VxTooltip>

On Various Elements

<VxTooltip content="Badge"><VxBadge value="3" /></VxTooltip>
<VxTooltip content="Avatar"><VxAvatar name="John" /></VxTooltip>
<VxTooltip content="Help"><span class="help">What?</span></VxTooltip>

API

Props

Prop	Type	Default	Description
v-model	boolean	—	Программное управление видимостью
content	string	''	Текстовое содержимое tooltip
trigger	'hover' | 'click' | 'focus' | 'contextmenu'	'hover'	Способ вызова tooltip
theme	'dark' | 'light'	'dark'	Визуальная тема
color	string	''	Произвольный цвет фона (CSS-значение, поддерживает градиенты)
textColor	string	''	Произвольный цвет текста
arrow	boolean	false	Показать направляющую стрелку
disabled	boolean	false	Отключить tooltip
showDelay	number	100	Задержка перед показом (мс)
hideDelay	number	100	Задержка перед скрытием (мс)
autoClose	number	0	Автозакрытие через N мс (0 = выключено)
offset	number	8	Расстояние от триггера в px
maxWidth	string | number	280	Максимальная ширина tooltip
enterable	boolean	true	Держать tooltip открытым, когда курсор входит в него
raw	boolean	false	Отрисовать content как сырой HTML
always	boolean	false	Держать tooltip всегда видимым
copyable	boolean	false	Клик копирует текст в буфер обмена
loading	boolean	false	Показать индикатор вместо содержимого
persistent	boolean	false	Сохранять DOM при скрытии (v-show вместо v-if)
beforeShow	() => boolean | Promise<boolean>	—	Асинхронный охранник; верните false или выбросьте, чтобы заблокировать
teleportTo	string	''	Цель teleport (например 'body') для выхода из overflow
transition	string	'vx-tooltip'	Пользовательское имя transition

Events

Event	Payload	Description
update:modelValue	boolean	Синхронизация v-model
show	—	Tooltip стал видимым
hide	—	Tooltip скрыт
copy	string	Текст скопирован в буфер обмена (при copyable)

Slots

Slot	Description
default	Элемент-триггер
content	Пользовательское содержимое tooltip (заменяет prop content)

Exposed Methods

Method	Description
show()	Программно показать tooltip
hide()	Программно скрыть tooltip
updatePosition()	Пересчитать позицию