Popover

Description

The Popover is a provider component that displays rich interactive content when triggered by a click. Unlike tooltips which appear on hover, popovers require explicit user interaction to open and close.

This component must wrap PopoverTrigger and PopoverContent to function correctly.

Component

Properties

Prop	Type	Description	Optional
isContrast	boolean	Choose between dark or light version of the popover	✅
initialOpen	boolean	Whether the popover is initially open, false by default	✅
placement	Placement	Position of the popover 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 {
  Popover,
  PopoverTrigger,
  PopoverContent,
  IconButton,
} from '@tmedxp/react-components';

const PopoverExample = () => {
  return (
    <Popover placement="bottom" isContrast={false}>
      <PopoverTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </PopoverTrigger>
      <PopoverContent title="More Information" labels={{ Close: 'Close' }}>
        <p>This is detailed interactive content.</p>
      </PopoverContent>
    </Popover>
  );
};

export { PopoverExample };