Tooltip

Description

The Tooltip is a provider component that displays short contextual hints on hover or focus. It manages the state and positioning of tooltips, ensuring proper coordination between the trigger element and tooltip content.

This component must wrap TooltipTrigger and TooltipContent to function correctly.

Component

Properties

Prop	Type	Description	Optional
isContrast	boolean	Choose between dark or light version of the tooltip	✅
initialOpen	boolean	Whether the tooltip is initially open, false by default	✅
placement	Placement	Position of the tooltip relative to trigger (top, top-start, top-end | bottom, bottom-start, bottom-end | left, left-start, left-end | right, right-start, right-end). top by default	✅
offset	number	Distance in pixels between trigger and tooltip, defaults to 8px	✅

Example

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  IconButton,
} from '@tmedxp/react-components';

const TooltipExample = () => {
  return (
    <Tooltip placement="top" isContrast={false}>
      <TooltipTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </TooltipTrigger>
      <TooltipContent>This is helpful information</TooltipContent>
    </Tooltip>
  );
};

export { TooltipExample };