入门 CSS 工具提示对齐

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

工具提示对齐可用于使用不同的对齐类将工具提示向左或向右对齐。

入门 CSS 工具提示对齐类：

• tooltipped-align-right-1：该类用于工具提示容器，以将工具提示与元素右侧的箭头对齐。
• tooltipped-align-right-2：该类用于工具提示容器，以将工具提示与元素右侧的箭头对齐。
• tooltipped-align-left-1：该类用于工具提示容器，以将工具提示与元素左侧对齐，并使用更预期的箭头。
• tooltipped-align-left-2：此类用于工具提示容器，以将工具提示与元素左侧对齐，并使用不那么预期的箭头。

句法：

    ...

示例 1：此示例说明了 Primer CSS 中工具提示对齐类的实现。

HTML

  

    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS - Tooltip Alignment
    
    

        
            Right Aligned Tooltip 1
        
  
        
            Right Aligned Tooltip 2
        
  
        
            Left Aligned Tooltip 1
        
  
        
            Left Aligned Tooltip 2
        
    

  

输出：

入门 CSS 工具提示对齐

示例 2：以下示例显示 Primer CSS 工具提示与不同元素的对齐方式。

HTML

  

    
    
    
    

  

    

        
GeeksforGeeks
        

            Primer CSS - Tooltip Alignment 
            with different elements
        
    
  
    

        
            Tooltip on a button
        
        

            Tooltip on a paragraph
        
  
        

            Tooltip on a heading
        
    

  

输出：

参考： https://primer.style/css/components/tooltips#tooltip-alignment