Components

Tooltip

A popup that reveals information when hovering over an element.

Usage

Use the default slot to define the Tooltip trigger and, optionally, the content slot to set its content.

Loading preview...

<template>
  <MeTooltip arrow>
    <MeButton label="Hover me" />

    <template v-slot:content>
      I'm a tooltip!
    </template>
  </MeTooltip>
</template>

Arrow

Use the arrow prop to display an arrow on the popup.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    arrow
  >
    <MeButton label="Hover me" />
  </MeTooltip>
</template>

Text

Use the text prop to set the content of the Tooltip.

<template>
  <MeTooltip
    arrow
    text="I'm a tooltip"
  >
    <MeButton label="Hover me" />
  </MeTooltip>
</template>

Side

Use the side prop to set the positioning of the Tooltip.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    side="bottom"
    arrow
  >
    <MeButton label="Hover me" />
  </MeTooltip>
</template>

Disabled

Use the disabled to disable the Tooltip.

<template>
  <MeTooltip
    text="I'm a tooltip!"
    side="bottom"
    arrow
    disabled
  >
    <MeButton label="Hover me" />
  </MeTooltip>
</template>

API

Props

Prop	Default	Type
`arrow`	`false`	`boolean` Displays an arrow on the Tooltip.
`disabled`	`false`	`boolean` Disabled the Tooltip.
`side`	`'top'`	`'top' \| 'right' \| 'bottom' \| 'left'` The preferred side of the trigger to render against.
`text`		`string` Tooltip content.

Slots

Default	Type
`default`
`content`

Spinner

A loading indicator component with three variations - border, grow, and logo.

LLMs Integration

Generate AI-ready content files for LLM consumption using the Nuxt LLMs module.