Help tooltip
import { Tooltip, TooltipContent, TooltipTrigger } from "@combric/react";
export function Example() {
return <Tooltip><TooltipTrigger>Help</TooltipTrigger><TooltipContent>Keyboard shortcut: Ctrl+K</TooltipContent></Tooltip>;
}Tooltip
Immediate non-interactive description on hover or focus.
@combric/react · v1.1.1 · Current
Import and usage
import { Tooltip, TooltipTrigger, TooltipContent } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Position and alignment
import { Tooltip, TooltipContent, TooltipTrigger } from "@combric/react";
export function Example() {
return <Tooltip><TooltipTrigger>Shortcut</TooltipTrigger><TooltipContent side="left" align="start">Press Ctrl+K to search.</TooltipContent></Tooltip>;
}Public API
| Name |
|---|
Tooltip |
TooltipTrigger |
TooltipContent |
| Property / capability | Published contract |
|---|---|
| Contract | side |
| Contract | align |
| Contract | open/defaultOpen |
Accessibility
Uses role tooltip and aria-describedby, never moves focus, and requires non-interactive content.
Keyboard
Focus opens; blur or Escape closes.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.