Tooltip
A popup that displays information related to an element.
HTML
Anatomy
import { Tooltip } from "@lualtek/react-components";
export default () => {
return (
<Tooltip trigger={<span tabIndex={0}>Hover me</span>}>
This is an extended description.
</Tooltip>
);
};
⚠️
You must wrap your application with TooltipProvider
to ensure the tooltip is
correctly placed. Read more bout it.
API Reference
This component extends the radix-ui Tooltip.Root
(opens in a new tab) and Tooltip.Content
(opens in a new tab) components, which expose different props that enables multiple functionalities, and adds the following:
export type TooltipProps = {
/**
* The element that triggers the tooltip.
*/
trigger: ReactNode;
};