CTooltip

Лёгкий тултип на основе CMenu. Показывает вспомогательный текст рядом с элементом-активатором. Следует паттерну WAI-ARIA tooltip — активатор автоматически получает aria-describedby.

Базовое использование

Показать код

<template>
  <CTooltip open-on-hover close-on-leave align="bottom-center" :offset-y="6">
    <template #activator="{ on, activator }">
      <button v-bind="activator" v-on="on">Сохранить</button>
    </template>
    Сохранить изменения
  </CTooltip>
</template>

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

Показать код

<CTooltip align="top-center" open-on-hover close-on-leave :offset-y="6">
  <template #activator="{ on, activator }">
    <button v-bind="activator" v-on="on">Сверху</button>
  </template>
  Тултип сверху
</CTooltip>

Задержки

open-delay / close-delay предотвращают случайные срабатывания при быстром движении мыши.

InstantNo delay

Open delayopen: 400ms

Close delayclose: 600ms

Both300ms · 400ms

Показать код

<CTooltip open-on-hover close-on-leave align="bottom-center" :offset-y="6" :open-delay="500">
  <template #activator="{ on, activator }">
    <button v-bind="activator" v-on="on">Наведи</button>
  </template>
  Появится через 500мс
</CTooltip>

Кастомная ширина

По умолчанию тултип оборачивает контент (width="auto"). Передай width для фиксированной ширины.

<CTooltip open-on-hover close-on-leave :width="240">
  <template #activator="{ on, activator }">
    <button v-bind="activator" v-on="on">?</button>
  </template>
  Длинное описание которому нужна фиксированная ширина
</CTooltip>

Доступность

CTooltip автоматически:

• Генерирует уникальный id для контейнера
• Устанавливает role="tooltip" на контейнер
• Добавляет aria-describedby с этим id на активатор

<!-- Результирующий HTML -->
<button aria-describedby="c-tooltip-abc123">Наведи</button>
<div id="c-tooltip-abc123" role="tooltip" class="c-tooltip c-menu">
  Сохранить изменения
</div>

---

API

CTooltip принимает все props, slots и события CMenu.

Props

Prop	Тип	По умолчанию	Описание
width	number | string	'auto'	Ширина тултипа
openOnHover	boolean	—	Открыть при наведении
closeOnLeave	boolean	—	Закрыть при уходе курсора
openDelay	number | string	—	Задержка перед открытием (мс)
closeDelay	number | string	—	Задержка перед закрытием (мс)
align	AlignValue	—	Сторона и выравнивание (напр. bottom-center, top, right-center)
offsetX	number | string	—	Горизонтальный отступ (px)
offsetY	number | string	—	Вертикальный отступ (px)

Все остальные props CMenu также принимаются.

Slots

Slot	Props	Описание
activator	{ on, activator }	Элемент который показывает тултип
default	—	Контент тултипа

Events

Наследует все события CMenu: open, close, update:modelValue.