Tooltip: With an arrow

arrow adds a pointer that stays on the trigger even when the tooltip shifts to fit the screen.

import { IconBell } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function TooltipWithArrow() {
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <Button variant="outline" size="icon" aria-label="Notifications" />
        }
      >
        <IconBell />
      </TooltipTrigger>
      <TooltipContent arrow>Notifications</TooltipContent>
    </Tooltip>
  )
}

Add this example

This adds the example as components/examples/tooltip/arrow.tsx, together with the Tooltip component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/tooltip-arrow.json

To add only the component, follow the Tooltip installation.

Props in this example

The Tooltip props this example sets, from the API reference.

TooltipTrigger

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

TooltipContent

Prop	Type	Default
`arrow`	`boolean`	`false`

Every prop is in the Tooltip API reference.

More Tooltip examples

See them all, with keyboard support and accessibility notes, on the Tooltip page.