Skip to content
Related Articles

Related Articles

Primer CSS Top-right

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
View Discussion
Improve Article
Save Article

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 a 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 Top-Right which pops the message to the Top-Right of the element.

Primer CSS Popover Top-Right classes used:

  • Popover: This class is used to create a popover element. The rest of the popover classes should be wrapped inside this class.
  • Popover-message–top-right: This class is used to set the popover pop side as the Top side of the right.

Syntax:

<div class="position-relative text-right pr-2">
  <button class="btn btn-primary">...</button>
  <div class="Popover right-0 position-relative">
    <div class="Popover-message Popover-message--top-right 
       text-left p-4 mt-2 Box color-shadow-large">
      <h4 class="mb-2">...</h4>
      <p>...</p>
      <button type="submit" class="btn btn-outline mt-2 text-bold">
          ...
      </button>
    </div>
  </div>
</div>

Example 1: Below example demonstrates the use of Primer CSS Popover Top-Right. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Popover Top-Right</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="pr-12">
        <h1 class="color-fg-success text-right">
            GeeksforGeeks
        </h1>
          
        <h3 class="text-right">
            Primer CSS Popover Top-Right
        </h3>
  
        <div class="position-relative text-right pr-2">
            <button class="btn btn-primary">Hi! Geeks</button>
            <div class="Popover right-0 position-relative">
                <div class="Popover-message Popover-message--top-right 
                  text-left p-4 mt-2 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>
        </div>
    </div>
</body>
  
</html>

Output:

Primer CSS Popover Top-Right

Example 2: Below is another example that demonstrates the use of Popover Top-Right using an image. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Popover Top-Right</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="pr-12">
        <h1 class="color-fg-success text-right">
            GeeksforGeeks
        </h1>
          
        <h3 class="text-right">
            Primer CSS Popover Top-Right
        </h3>
  
        <div class="position-relative text-right pr-2">
            <img src=
                alt="gfg">
            <div class="Popover right-0 position-relative">
                <div class="Popover-message 
                    Popover-message--top-right text-left 
                    p-4 mt-2 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">
                        Visit
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Primer CSS Popover Top-Right

Reference: https://primer.style/css/components/popover#top-right


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!