Primer CSS Popover 底部

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

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

Primer CSS Popover 使用的底层类：

Popover：这个类用于创建一个popover元素。其余的 popover 类应该包装在这个类中。
popover-message-bottom：该类用于设置popover弹出侧向左。

句法：


  
              
          ....

示例 1：下面的示例演示了 Primer CSS Popover bottom的使用。

HTML



  

     Primer CSS Popover bottom 
    

  

    
         GeeksforGeeks 
         Primer CSS Popover bottom 
      
        
            
              
                GeeksforGeeks
                
                    It is a Computer Science portal for all 
                    the geeks across the globe.

HTML



  

    Primer CSS Popover bottom
    

  

    
         
            GeeksforGeeks 
        
          
        Primer CSS Popover bottom
  
        
            
                
                    Geeks Summer Carnival
                      
                    
                        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.

输出：

Primer CSS Popover 底部

示例 2：下面是另一个示例，使用图像演示 Primer CSS Popover底部的使用。

HTML



  

    Primer CSS Popover bottom
    

  

    
         
            GeeksforGeeks 
        
          
        Primer CSS Popover bottom
  
        
            
                
                    Geeks Summer Carnival
                      
                    
                        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.

输出：

Primer CSS Popover 底部

参考： https://primer.style/css/components/popover#bottom