Component · popover (manual)

Tooltip

A short hint. Hover with a mouse, focus with a keyboard, long press on touch.

Install

npx @lazizbekio/mitame add tooltip

Usage

import { InfoIcon } from "@/components/mitame/icons/info";
import { Button } from "@/components/mitame/ui/button";
import { Tooltip } from "@/components/mitame/ui/tooltip";

export default function TooltipDemo() {
  return (
    <div className="flex items-center gap-3">
      <Tooltip content="Saved to your account">
        <Button variant="primary">Save</Button>
      </Tooltip>
      <Tooltip content="More about plans" placement="right">
        <Button variant="ghost" aria-label="More about plans">
          <InfoIcon />
        </Button>
      </Tooltip>
    </div>
  );
}

Props

Prop	Type	Default	Description
`content`	`ReactNode`	—	The hint.
`children`	`ReactElement`	—	One focusable element, like a Button.
`placement`	`Placement`	`"top"`	Where it appears.
`delay`	`number`	`400`	Milliseconds before showing on hover.

Keyboard

Key	Does
`Tab to the element`	Show
`Esc`	Hide

Notes

Never put information only in a tooltip; touch users have to go looking for it.

Styling

Every part has a data-slot starting with tooltip, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.