PopoverContent

Description

The PopoverContent component displays interactive content in a panel. It includes a close button, optional title, optional link button, and can render as a modal on mobile devices.

Must be used within a Popover provider.

Component

Properties

Prop	Type	Description	Optional
labels	PopoverLabels	Accessibility labels, requires Close property for close button	❌
title	string	Optional title displayed at the top of the popover	✅
linkProperties	LinkButtonProperties	Optional link button configuration displayed at the bottom	✅
useModalOnMobile	boolean	Renders as a modal on mobile devices, false by default	✅
className	string	Custom CSS class names for styling	✅

Example

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  IconButton,
} from '@tmedxp/react-components';

const PopoverContentExample = () => {
  return (
    <Popover placement="bottom">
      <PopoverTrigger>
        <IconButton iconName="info" size="sm" isNeutral />
      </PopoverTrigger>
      <PopoverContent
        title="Additional Information"
        linkProperties={{
          text: 'Learn More',
          href: '/more-info',
        }}
        useModalOnMobile={true}
        labels={{ Close: 'Close popover' }}
      >
        <p>This is detailed content with interactive elements.</p>
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
        </ul>
      </PopoverContent>
    </Popover>
  );
};

export { PopoverContentExample };