📜  Primer CSS Popover Right-top

📅  最后修改于: 2022-05-13 01:56:34.864000             🧑  作者: Mango

Primer CSS Popover Right-top

Primer CSS是一个免费的开源 CSS 框架,它建立在创建基本样式元素(如间距、排版和颜色)基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS提供了 Popover,用于将注意力转移到精确的用户界面元素上,通常用于指示任何操作或通过新体验引导用户。在本文中,我们将讨论 Popover Right-top,它将消息弹出到元素的右上角。

Primer CSS Popover Right-top 使用的类:

  • Popover:这个类用于创建一个popover元素。其余的 popover 类应该包装在这个类中。
  • popover-message-right-top:该类用于将popover pop设置为元素右侧的顶边。

句法:

...

...

示例 1:下面是演示如何使用 Primer CSS Popover Right-top 的示例。

HTML


  

    Primer CSS Popover Right-top
    

  

    

        GeeksforGeeks     

           

        Primer CSS Popover Right-top.     

       
        
            
                

GeeksforGeeks

                

                    It is a Computer Science portal for                     all geeks across the world.                 

                                
        
                
  


HTML


  

    Primer CSS Popover Right-top
    

  

    

        GeeksforGeeks     

           

        Primer CSS Popover Right-top.     

       
        
            
                

                    Data Structures and Algorithms - Self Paced                 

                                   

                    Most popular course on DSA trusted by over 75,000                     students! Built with years of experience by industry                     experts and gives you a complete package of video                     lectures, practice problems, quizzes, discussion forums                     and contests. Start Today!                 

                                
        
           gfg     
  


输出:

Primer CSS Popover Right-top

示例 2:下面是另一个示例,演示如何使用 Primer CSS Popover Right-top 使用图像。

HTML



  

    Primer CSS Popover Right-top
    

  

    

        GeeksforGeeks     

           

        Primer CSS Popover Right-top.     

       
        
            
                

                    Data Structures and Algorithms - Self Paced                 

                                   

                    Most popular course on DSA trusted by over 75,000                     students! Built with years of experience by industry                     experts and gives you a complete package of video                     lectures, practice problems, quizzes, discussion forums                     and contests. Start Today!                 

                                
        
           gfg     
  

输出:

Primer CSS Popover Right-top

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