Primer CSS Popover Variants
Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.
Primer CSS Popovers are used to bring the attention of the users to specific content. This is typically an action or an important message for the respective users. Popovers generally have two important classes as follows:
- Popover: Block element with absolute position
- Popover-message: It is the child element which is the content and caret.
The default positioning of the caret is on the top edge of the Popover-message with horizontally centered. In order to change from its default position, we can use the different available Popover Variants Classes, which can help us to position the caret by specifying the different modifiers with Popover-message.
Primer CSS Popover Variants Classes:
- Popover-message–bottom: Caret bottom
- Popover-message–right: Caret right
- Popover-message–left: Caret left
- Popover-message–bottom-left: Caret bottom left
- Popover-message–bottom-right: Caret bottom right
- Popover-message–left-bottom: Caret left bottom
- Popover-message–left-top: Caret left top
- Popover-message–right-bottom: Caret right bottom
- Popover-message–right-top: Caret right top
- Popover-message–top-left: Caret top left
- Popover-message–top-right: Caret top right
- Popover-message–large: Larger width on screens wider than 544px
Syntax: Create a popover as follows:
<div class="d-flex flex-justify-center flex-items-center"> <div class="Popover position-relative"> <div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large"> <h4 class="mb-2">GeeksforGeeks</h4> <p>Welcome to GeeksforGeeks</p> </div> </div> <button class="btn btn-primary">Popover</button> </div>
Example 1: In the following example, we have four different 4 different popovers in different directions.
Example 2: In the following example, we have created a large popover on the screen.