Tooltip

The Tooltip component displays additional information when a user hovers over, focuses on, or taps an element. It’s perfect for providing context, explanations, or hints without cluttering the interface.

Usage

<script>
  import { 
    Tooltip,
    TooltipTrigger,
    TooltipContent,
    TooltipProvider 
  } from "$lib/components/ui/tooltip";
  import { Button } from "$lib/components/ui/button";
</script>

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>
      <Button>Hover Me</Button>
    </TooltipTrigger>
    <TooltipContent>
      Tooltip content
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Basic Tooltip

A simple tooltip that appears on hover.

With Side Options

Tooltips can be positioned on different sides of the trigger element.

With Custom Offset

Adjust the distance between the tooltip and the trigger element.

With Icon and Text

Using tooltips to provide context for icon buttons.

Delayed Tooltip

Adding a delay before the tooltip appears to prevent accidental triggers.

API Reference

Tooltip Components

Component	Description
`Tooltip`	The root component that manages the tooltip state.
`TooltipTrigger`	The element that triggers the tooltip visibility.
`TooltipContent`	The floating element that contains the tooltip content.
`TooltipProvider`	Provider component that scopes tooltip configurations.

TooltipProvider Properties

Property	Type	Default	Description
`delayDuration`	`number`	`300`	The delay duration in milliseconds before the tooltip appears.
`skipDelayDuration`	`number`	`300`	Duration to skip delay if recently triggered.
`disableHoverableContent`	`boolean`	`false`	Disables content hovering.

Tooltip Properties

Property	Type	Default	Description
`open`	`boolean`	`undefined`	Whether the tooltip is open.
`defaultOpen`	`boolean`	`false`	Default open state.
`onOpenChange`	`function`	`undefined`	Callback fired when open state changes.

TooltipContent Properties

Property	Type	Default	Description
`sideOffset`	`number`	`4`	Distance from the trigger element.
`side`	`"top" \\| "right" \\| "bottom" \\| "left"`	`"top"`	Placement side of the tooltip.
`align`	`"start" \\| "center" \\| "end"`	`"center"`	Alignment of the tooltip relative to the trigger.
`class`	`string`	`undefined`	Custom CSS classes.

Implementation

The Tooltip component is built on top of bits-ui primitives with appropriate styling using Tailwind CSS. Here’s how the tooltip content is implemented:

<script lang="ts">
	import { Tooltip as TooltipPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";

	let {
		ref = $bindable(null),
		class: className,
		sideOffset = 4,
		...restProps
	}: TooltipPrimitive.ContentProps = $props();
</script>

<TooltipPrimitive.Content
	bind:ref
	{sideOffset}
	class={cn(
		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
		className
	)}
	{...restProps}
/>

The component is designed with accessibility in mind, including keyboard navigation support, appropriate ARIA attributes, and animation effects for a polished user experience.