104Get started
HextaUI

Tooltip: Toolbar

Rest on one button, then slide along the group. Tooltips under one TooltipProvider swap instantly while you move between them.

import {
  IconBold,
  IconItalic,
  IconLink,
  IconStrikethrough,
  IconUnderline,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd } from "@/components/ui/kbd"
import { TooltipGroup, TooltipTrigger } from "@/components/ui/tooltip"

const tools = [
  { label: "Bold", keys: "mod+b", icon: IconBold },
  { label: "Italic", keys: "mod+i", icon: IconItalic },
  { label: "Underline", keys: "mod+u", icon: IconUnderline },
  { label: "Strikethrough", keys: "mod+shift+x", icon: IconStrikethrough },
  { label: "Insert link", keys: "mod+k", icon: IconLink },
]

export function TooltipToolbar() {
  return (
    <TooltipGroup side="bottom">
      <ButtonGroup aria-label="Formatting">
        {tools.map(({ label, keys, icon: Icon }) => (
          <TooltipTrigger
            key={label}
            content={
              <>
                {label}
                <Kbd keys={keys} size="sm" />
              </>
            }
            render={<Button variant="outline" size="icon" aria-label={label} />}
          >
            <Icon />
          </TooltipTrigger>
        ))}
      </ButtonGroup>
    </TooltipGroup>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/tooltip-toolbar.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

PropTypeDefault
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Tooltip API reference.

More Tooltip examples

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

Related components