You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Structure

Popover

Sizes

Popovers have a set of fixed width options, ranging from extra small (192px) to a large (640px). This is similar in how the Modal's width operates. There is also an option for the popover to extend to 100% the width of the element it is wrapped around.

Padding

There are three configurable padding options for the overall modal: small, medium, and large. These options are independent of the width properties.

Small

Made for small, simple dropdowns.

Medium

Default — for most use cases. Complex dropdowns, small–medium sized interactive overlays on screen.

Large

Similiar in nature to a modal, these are for larger flows.

Popovers have optional sections for a header and footer. This can be useful when the body section is a scrollable area.

Body Sections

The body section is where most or all of the content of a popover exists. It exists between the optional popover header and footer.

Line Divider

A divider can be used to separate out sections within a popover. By default, dividers extend the full width of the popover, and do not provide any built in padding above or below it.

Full-width Image

A full-width image can be applied to the header section of a popover.

No Padding Sections

Overrides the popover's built in padding (via negative margins) for a particular section. This can be used to introduce a full-width background color to a section.

Scrollable Sections

The body content of a popover can be given a fixed height and become scrollable. The header and footer content will remain fixed at the bottom.

Directions

Popovers can appear in many directions relative to an element. Direction is manually controlled. The default is to appear above the element.

Open on Hover

The popover can also be triggered through hover. In this scenario, they behave similar to the tooltip, but with more potential information to display.

Close on Body and Button Click

More complex open and close interactions are possible. For example, a popover can be opened with both a hover or a mouse click, and a popover can be closed by clicking outside body content.

Open through a React Portal

Popovers are typically wrapped in another element. However they can be opened outside of the DOM hierarchy through a React portal.


Best Practices

  • Popovers should be placed next to the element it is related to.
  • Popover information should not be critical to the page.
  • Can be used to suggest or guide users through a page.

  • To interrupt the user flow with content, use a modal, dialog, or takeover.
  • For adding quick clarity to an element via hover, use a tooltip.
  • For popover with actionable menu, use a action menu.
  • For popover for input or dropdown, use a select.

Importing

import { Popover } from '@servicetitan/design-system';