Подсказка

Показывает небольшой адаптивный popover под trigger или сверху, если снизу не хватает места.

Установка

npx alixan-ui-nuxt add tooltip

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

<template>
  <Button tooltip="tooltip.demo.save">
    Save changes
  </Button>
</template>

С иконкой

<script setup lang="ts">
import { Info } from '@lucide/vue'
</script>

<template>
  <IconButton tooltip="tooltip.demo.info" variant="outlined">
    <Info />
  </IconButton>
</template>

С HTML

Короткое описание

<template>
  <Tooltip text="tooltip.demo.shortDescription">
    <span>
      Short description
    </span>
  </Tooltip>
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
text	string	''	Контент tooltip. Значения могут быть ключами переводов.
disabled	boolean	false	Отключает взаимодействие и уменьшает opacity.
delay	number	100	Задержка в миллисекундах перед открытием tooltip.

Свойство	Тип	По умолчанию	Описание
default	slot	-	Trigger-элемент, который открывает tooltip при hover или focus.
content	slot	-	Кастомный контент tooltip вместо prop text.