Popover

The Popover component is a client-side component that displays content in a portal, triggered by a button. It is built with Radix's Popover.

It uses four of Radix's Popover parts:

• Popover: wrapper that contains all of the parts of the popover
• PopoverTrigger: button that toggles the popover
• PopoverAnchor: optional element to position the popover
• PopoverContent: the content displayed in the open popover

Example

Preview

The PopoverAnchor is positioned in the lower right corner of this container.

Code

import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverTrigger,
} from '@hv/ui/popover';
import { Button } from '@hv/ui/button';

export default function PopoverExample() {
  return (
    <div className='relative min-h-36 max-w-sm border p-4'>
      <Popover>
        <PopoverAnchor className='absolute bottom-0 right-0' />
        <PopoverTrigger>
          <Button>Toggle Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          <div>This is the popover content.</div>
        </PopoverContent>
      </Popover>
      <p className='py-4'>
        The <code>PopoverAnchor</code> is positioned in the lower right corner
        of this container.
      </p>
    </div>
  );
}

Props

While the High Velocity front-end app does not extend the Radix Popover parts, the hv-ui component does change the default value for the sideOffset property. For a list of all other props and their defaults, see the Radix PopoverContent table.

Property	Description	Type
sideOffset	The distance in pixels from the anchor. Default is 4.	Number