Tooltip

Ready

Short hint on hover or focus.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add tooltip

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent, SimpleTooltip } from "@/components/ui/tooltip";

Default

A tooltip can never be the only source of information

Touch devices have no hover, and a tooltip on a non-focusable element is unreachable by keyboard. Anything it alone says is lost for those users. Note the buttons above still carry their own aria-label— the tooltip supplements, it doesn't supply.

View source on GitHub → components/ui/tooltip.tsx