Overlays and menus

useTooltip

Manages tooltip show/hide with configurable delay, hover and focus triggers, and Escape key dismissal.

Live component preview · Astro

Explore Tooltip

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useTooltip.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Button, Tooltip, TooltipContent } from '@santi020k/lumen-react'
import { useTooltip } from '@santi020k/lumen-react'

export function SaveButton() {
  const tooltip = useTooltip({ delay: 300 })

  return (
    <Tooltip {...tooltip.rootProps}>
      <Button>Save</Button>
      <TooltipContent {...tooltip.tooltipProps}>Save your changes</TooltipContent>
    </Tooltip>
  )
}

import { Button, Tooltip, TooltipContent } from '@santi020k/lumen-react'
import { useTooltip } from '@santi020k/lumen-react'

export function SaveButton() {
  const tooltip = useTooltip({ delay: 300 })

  return (
    <Tooltip {...tooltip.rootProps}>
      <Button>Save</Button>
      <TooltipContent {...tooltip.tooltipProps}>Save your changes</TooltipContent>
    </Tooltip>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
delay	number	400	Milliseconds to wait before showing the tooltip on hover.
defaultOpen	boolean	false	Initial open state.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback fired when the tooltip opens or closes.

Controller return values

Property	Type	Description
rootProps	LumenProps<"span">	Spread onto the wrapper span. Includes hover and focus listeners.
tooltipProps	LumenProps<"span">	Spread onto the tooltip content span. Includes role="tooltip" and visibility.
open	boolean	Current open state.
close	() => void	Close the tooltip.
setOpen	Dispatch<SetStateAction<boolean>>	State setter for controlled usage.