Skip to content
aq-ui
Back to ComponentsComponent

Tooltip

Open-code aq-ui accessible component family for Tooltip.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add tooltip

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { Tooltip } from "@/components/ui/tooltip"

<Tooltip />

Tooltip

functionSource L22

Open-code aq-ui accessible component family for Tooltip.

function Tooltip({ ...props }: TooltipPrimitive.Root.Props)
Props type
TooltipPrimitive.Root.Props
<Tooltip />

TooltipContent

constSource L40

Content export for composing Tooltip.

const TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Popup>, TooltipPrimitive.Popup.Props & Pick< TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >>(…)
Props type
TooltipPrimitive.Popup.Props & Pick< TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >
<TooltipContent />

TooltipProvider

functionSource L9

Provider export for composing Tooltip.

function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props)
Props type
TooltipPrimitive.Provider.Props
<TooltipProvider />

TooltipTrigger

constSource L26

Trigger export for composing Tooltip.

const TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipPrimitive.Trigger.Props>(…)
Props type
TooltipPrimitive.Trigger.Props
<TooltipTrigger />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0

Files

  • components/ui/tooltip.tsx

Source