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

Prop	Description	Required	Value
className	custom styling	optional	SCSS or Tailwind
children	component(s) to wrap within tooltip	optional	component(s)
sideOffset	offset of the tooltip from the trigger	optional	integer (default: 4)

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.