Tooltip

Shows a tooltip message when hovering over the contents of the default slot.

It works for almost any element.

Code Example

<Tooltip tip="what a lovely tip!">
  <Button>Hover Me</Button>
</Tooltip>

Components

Tooltip is a standalone component.

Tooltip can be customized with following props.

Prop	Type	Description
`tip`	string	the text for the tooltip
`open`	boolean	allows manually opening the tooltip
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`position`	string	Sets the position to one of the below prop names.
`top`	boolean	opens upwards
`right`	boolean	opens to the right
`bottom`	boolean	opens downwards
`left`	boolean	opens to the left

Open

Use the open prop to manually open the tooltip:

Show Tip:

Code Example

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <Label class="gap-2">
    Show Tip:
    <Toggle v-model="isOpen" primary />
  </Label>

  <Tooltip primary :open="isOpen" tip="what a lovely tip!">
    <Button>
      Hover me or use the toggle
    </Button>
  </Tooltip>
</template>

Color

There are two ways of specifying Tooltip color:

The primary, secondary, neutral, accent, info, success, warning, and error boolean props.
The color prop, which accepts a string with any of the above prop names.

Code Example

<Tooltip tip="what a lovely tip!" primary>
  <Button>Hover Me</Button>
</Tooltip>

All of the buttons and tooltips in the above example match in color. You can also mix and match by specifying a different color for the button and tooltip.

Position

There are two ways of controlling the position of the Tooltip:

The top, right, bottom, and left boolean props.
The position prop, which accepts a string with any of the position names.

Code Example

<Tooltip tip="what a lovely tip!" position="top">
  <Button>Hover Me</Button>
</Tooltip>

Prev Text

Next Prose