Tooltip

The Tooltip component provides a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Preview

Usage

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <TooltipProvider>
      <Tooltip>
      
        <TooltipTrigger asChild>
          <button>Hover me</button>
        </TooltipTrigger>
        
        <TooltipContent>
          Tooltip content goes here
        </TooltipContent>
        
      </Tooltip>
    </TooltipProvider>
  );
}

Props

Notes

  • The Tooltip component uses TooltipPrimitive from @radix-ui/react-tooltip for tooltip functionality.

  • The className prop allows for custom styling to be applied.

  • The children prop is required and should include the trigger and content for the tooltip.

  • The sideOffset prop specifies the offset of the tooltip from the trigger and defaults to 4.

  • For more details, refer to the Shadcn Tooltip documentation.

Last updated