Popovers are floating containers that opens on demand. They give users access to additional information and actions. The component is similar to Cards in that the content inside is highly customizable.
Popovers are general components with multiple purposes. For navigation or actions, use an Action Menu. For data input, use a Select.
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.
There are three configurable padding options for the overall modal: small, medium, and large. These options are independent of the width properties.
Made for small, simple dropdowns.
Default — for most use cases. Complex dropdowns, small–medium sized interactive overlays on screen.
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.
The body section is where most or all of the content of a popover exists. It exists between the optional popover header and footer.
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.
A full-width image can be applied to the header section of a popover.
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.
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.
Popovers can appear in many directions relative to an element. Direction is manually controlled. The default is to appear above the element.
The popover can also be triggered through hover. In this scenario, they behave similar to the tooltip, but with more potential information to display.
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.
Popovers are typically wrapped in another element. However they can be opened outside of the DOM hierarchy through a React portal.
import { Popover } from '@servicetitan/design-system';