基础 CSS 工具提示点击

Foundation CSS 是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计漂亮的响应式网站、应用程序和电子邮件，使其看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

工具提示是当用户将鼠标移到网站中的特定单词或特定按钮或控件上时出现的小文本或有时出现的单词。 Foundation CSS 有多种工具提示变体，例如 Tooltip top、Tooltip click、Tooltip left 和 Tooltip Right。在本文中，我们将了解 Tooltip Clicking。

默认情况下，单击工具提示将使其保持打开状态，直到您单击其他位置。但有时我们可能需要工具提示只有在悬停时才可见。要在您单击 Foundation CSS 中的其他位置之前禁用工具提示打开，我们使用 data-click-open 属性并将其设置为“false”。 data-click-open 默认设置为 true。

基础 CSS 工具提示点击属性：

• data-click-open：它是一个布尔参数，默认为true，如果设置为false，它将使工具提示在我们停止悬停在元素上时消失。

句法：

...

示例 1：此示例演示了基础 CSS 中的工具提示单击变体。

HTML

  

    Foundation Sites
    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
    
      
    Foundation CSS Clicking tooltip
      
    
        Geeksforgeeks
    
    is a Computer Science portal for geeks.
      
    
        Geeksforgeeks
    
    contains well written, well thought and 
    well explained computer science and 
    programming articles.
  
    
        $(document).foundation();
    

  

输出：

输出

示例 2：此示例演示了工具提示单击变体及其与基础 CSS 中的非单击的比较。

HTML

  

    Foundation Sites
    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
    
      
    Foundation CSS Clicking tooltip
      
    
        This tooltip will stay visible 
        till clicked somewhere else.
    
      
    
        This tooltip will only be 
        visible till it is hovered on.
    
  
    
        $(document).foundation();
    

  

输出：

输出

参考： https ://get.foundation/sites/docs/tooltip.html#tooltip-clicking