Tooltip

Usage

<script lang="ts">
  import { Tooltip, TooltipTrigger, TooltipContent } from '$lib/components/tooltip';
  import { Button } from '$lib/components/button';
</script>

<Tooltip>
  <TooltipTrigger asChild let:builder>
    <Button builders={[builder]}>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>A simple tooltip that appears on hover</TooltipContent>
</Tooltip>

Properties

The Tooltip component extends the Bits UI <Tooltip> component. Find the full list of available properties in the official Bits UI documentation.

TooltipContent

Examples

Side

Use the side property to change the side of the tooltip.

Align

Use the align property to change the alignment of the tooltip.

Width

Use the width property to change the width of the TooltipContent.

Same width

Use the sameWidth property to make the TooltipContent the same width as the trigger.