Tooltip

Displays a small adaptive popover below the trigger, or above it when there is not enough space.

Installation

npx alixan-ui-nuxt add tooltip

Usage

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

With Icon

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

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

With HTML

Short description

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

API Reference

Prop	Type	Default	Description
text	string	''	Tooltip content. Values can be translation keys.
disabled	boolean	false	Disables interaction and reduces opacity.
delay	number	100	Delay in milliseconds before the tooltip opens.

Prop	Type	Default	Description
default	slot	-	Trigger element that opens the tooltip on hover or focus.
content	slot	-	Custom tooltip content rendered instead of the text prop.