# Bubble: Tooltip

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

Example: https://hextaui.com/docs/bubble/examples/tooltip
Component docs: https://hextaui.com/docs/bubble.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/bubble-tooltip.json
```

This adds `components/examples/bubble/tooltip.tsx` with the Bubble component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/bubble/tooltip.tsx"
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>
  )
}
```

## More Bubble examples

- [Variants](https://hextaui.com/docs/bubble/examples/variants.md)
- [Alignment](https://hextaui.com/docs/bubble/examples/alignment.md)
- [Group](https://hextaui.com/docs/bubble/examples/group.md)
- [Shapes](https://hextaui.com/docs/bubble/examples/shapes.md)
- [Tail](https://hextaui.com/docs/bubble/examples/tail.md)
- [Reactions](https://hextaui.com/docs/bubble/examples/reactions.md)
- [Show more](https://hextaui.com/docs/bubble/examples/show-more.md)
- [Popover](https://hextaui.com/docs/bubble/examples/popover.md)
- [Long content](https://hextaui.com/docs/bubble/examples/long-content.md)
- [Nested reply](https://hextaui.com/docs/bubble/examples/nested.md)
- [Right to left](https://hextaui.com/docs/bubble/examples/rtl.md)