The Tooltip
component can be used to display additional information when hovering an element. This component is built on top of the Radix UI library and styled using Tailwind CSS.
This component comes from the Shadcn UI Library - with minimal changes to the original component. I recommended to check out the original documentation for more information.
Usage
import { Tooltip, TooltipTrigger, TooltipContent } from '~/core/ui/Tooltip';
import { Button } from '~/core/ui/Button';
<Tooltip>
<TooltipTrigger asChild>
<Button variant='ghost'>Hover me</Button>
</TooltipTrigger>
<TooltipContent>
Hello world
</TooltipContent>
</Tooltip>