Docs
Tooltip
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
import { Button } from "@repo/tailwindcss/default/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@repo/tailwindcss/default/tooltip";
const TooltipDemo = () => {
return (
<Tooltip>
<TooltipTrigger
as={(props: TooltipTriggerProps) => (
<Button variant="outline" {...props}>
Hover
</Button>
)}
/>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
);
};
export default TooltipDemo;import type { TooltipTriggerProps } from "@kobalte/core/tooltip";
import { Button } from "@repo/tailwindcss/solid/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@repo/tailwindcss/solid/tooltip";
const TooltipDemo = () => {
return (
<Tooltip>
<TooltipTrigger
as={(props: TooltipTriggerProps) => (
<Button variant="outline" {...props}>
Hover
</Button>
)}
/>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
);
};
export default TooltipDemo;Installation
npx shadcn-solid@latest add tooltipInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>