Popovers
Base
Position
An variant class can help set the position and the tip accordingly. The best option remains to set it with JS to match the center of the trigger elements, related to the popover position on the screen.
.c-popover .c-popover--position-top
.c-popover .c-popover--position-left
.c-popover .c-popover--position-right
Scripted tip positionning
You can use javascript to position the tip properly. In this case we rely on a child element c-popup__tip to draw the tip instead of the ::before pseudo element. The class c-popover--js-tip-positionning must be added to the popover component.
.c-popover c-popover--js-tip-positionning
No tip
.c-popover c-popover--no-tip
Custom content
You can remove the default padding and sizing to use utilities in order to create your own layout.
.c-popover c-popover--custom
Popover examples
Defining an entrance name is part of the Busy Reception pack
A fantastic set of useful features to help you manage your lobby.
You can try this pack during your 14-day trial
