#Popover

A small panel anchored to what opened it, for content the reader can act on — a form, a set of controls, a detail with a link in it. Reach for Tooltip when the content is only a label, and Drawer when it is a task rather than a detail.

Source · Storybook

#Usage

import { Alert, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';
import { Button } from '@wallarm-org/design-system/Button';
import { Popover, PopoverContent, PopoverTrigger } from '@wallarm-org/design-system/Popover';
import { VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

#Examples

#With tooltip

A tooltip on the popover's own trigger — the label explains what opens, the popover holds what you do.

#Min max width

Width bounds, for content that varies. Let it size to the content rather than pinning it, or short content sits in an empty box.

#Min max height

Height bounds with scrolling past the cap. If it scrolls often, the content has outgrown a popover.

#Props

#PopoverContent

#PopoverTrigger

#Explorer