Primer CSS Popover Bottom-right
Last Updated :
19 Apr, 2022
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS offers Popover that is used to carry attention to precise user interface elements, generally to indicate any action or to guide users via a new experience. In this article, we will discuss Popover bottom-right which pops the message to the bottom-right of the element.
Primer CSS Popover bottom-right classes:
- Popover: This class is used to create a popover element. The rest of the popover classes should be wrapped inside this class.
- Popover-message–bottom-right: This class is used to set the popover pop side as the right side of the bottom.
Syntax:
<div class="position-relative text-right pr-2">
<div class="Popover position-relative">
<div class="Popover-message Popover-message--bottom-right
p-4 mb-2 text-left Box color-shadow-large">
<p>...</p>
<button type="submit" class="btn btn-outline mt-2 text-bold">
...
</button>
</div>
<button class="btn btn-primary">...</button>
</div>
</div>
Example 1: Below example demonstrates the use of Primer CSS Popover bottom-right.
HTML
<!DOCTYPE html>
< html >
< head >
< title > Primer CSS Popover Bottom-right </ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "pr-12" >
< h1 class = "color-fg-success text-right" > GeeksforGeeks </ h1 >
< h3 class = "text-right" > Primer CSS Popover Bottom-right </ h3 >
< div class = "position-relative text-right mt-3" >
< div class = "Popover position-relative" >
< div class="Popover-message Popover-message--bottom-right
p-4 mb-2 text-left Box color-shadow-large">
< h4 class = "mb-2" >GeeksforGeeks</ h4 >
< p >
It is a Computer Science portal for
all geeks across the world.
</ p >
< button type = "submit" class =
"btn btn-outline mt-2 text-bold" >
Understood!
</ button >
</ div >
</ div >
< button class = "btn btn-primary" >Hi! Geeks</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Primer CSS Popover Bottom-right
Example 2: Below is another example that demonstrates the use of Primer CSS Popover bottom-right using an image.
HTML
<!DOCTYPE html>
< html >
< head >
< title > Primer CSS Popover Bottom-right </ title >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 class = "color-fg-success text-right pr-12" >
GeeksforGeeks
</ h1 >
< h3 class = "text-right pr-12" >
Primer CSS Popover Bottom-right
</ h3 >
< div class = "position-relative text-right pr-12" >
< div class = "Popover position-relative" >
< div class="Popover-message
Popover-message--bottom-right
p-4 mb-2 text-left Box color-shadow-large">
< h4 class = "mb-2" >Geeks Summer Carnival</ h4 >
< p >
GeeksforGeeks is finally back with Geeks
Summer Carnival 2022 the most awaited
7-days long Summer Carnival fiesta starting
on 5th April 2022 and wrapping on 11th
April 2022, where coders, like you, can
get a 110% return on your career growth
investment.
</ p >
< button type = "submit" class =
"btn btn-outline mt-2 text-bold" >
Got it!
</ button >
</ div >
</ div >
< img src =
alt = "gfg" >
</ div >
</ body >
</ html >
|
Output:
Primer CSS Popover Bottom-right
Reference: https://primer.style/css/components/popover#bottom-right
Share your thoughts in the comments
Please Login to comment...