入门 CSS 工具提示方向

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

Primer CSS Tooltips用于在鼠标指针移动或处于焦点时向用户提供有关元素的交互式文本提示。默认情况下，它是隐藏的。可以使用北、南、东和西方向指定工具提示方向。

入门 CSS 工具提示方向类：

tooltipped-n：该类用于设置工具提示的方向为元素的北边。
tooltipped-s：该类用于设置工具提示的方向为元素的南边。
tooltipped-e：该类用于将工具提示的方向设置为元素的东边。
tooltipped-w：该类用于将工具提示的方向设置为元素的西边。
tooltipped-nw：该类用于设置工具提示的方向为元素的西北方向。
tooltipped-ne：该类用于设置工具提示的方向为元素的东北方向。
tooltipped-sw：该类用于设置工具提示的方向为元素的西南方向。
tooltipped-se：该类用于设置工具提示的方向为元素的东南方向。

句法：


   Content

示例 1：此示例显示工具提示方向类的实现，以在 Primer CSS 中设置工具提示的方向。

HTML



  

    
    
    Tooltip Direction - Primer CSS
    

  

    
        GeeksforGeeks
        Primer CSS - Tooltip Direction

HTML



  

    
    
    Tooltip Direction - Primer CSS
    

  

    
        GeeksforGeeks
        Primer CSS - Tooltip Direction with no delay

输出：

入门 CSS 工具提示方向

示例 2：本示例展示了tooltip 方向类的实现，带有tooltipped-no-delay类，以消除打开 tooltip 的延迟。

HTML



  

    
    
    Tooltip Direction - Primer CSS
    

  

    
        GeeksforGeeks
        Primer CSS - Tooltip Direction with no delay

输出：

Primer CSS Tooltip Direction 无延迟

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