104Get started
HextaUI

Bubble: Tooltip

Render a bubble as a tooltip trigger to show details like the read time. Add tabIndex so keyboard users can reach it.

Hover to see when this was read.
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function BubbleTooltip() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Tooltip>
        <TooltipTrigger render={<Bubble align="end" tabIndex={0} />}>
          <BubbleContent>Hover to see when this was read.</BubbleContent>
        </TooltipTrigger>
        <TooltipContent side="left" sideOffset={8}>
          Read 9:41 AM
        </TooltipContent>
      </Tooltip>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Bubble installation.

More Bubble examples

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

Related components