Foundation 提示框

前言

• 提示框在鼠标移动到元素上后显示。

1、提示框

• 可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。

• 提示框需要使用 JavaScript。所以需要初始化 Foundation JS:

• 实例

  <a href="#" data-tooltip class="button" title="www.qianchia.com">鼠标移到我这!</a>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

1.1 加粗文本

• .has-tip 类可以加粗鼠标移动的文本:

• 实例

  <span data-tooltip title="Qian Chia 工作室">鼠标移到我这!</span>
  <span data-tooltip class="has-tip" title="Qian Chia 工作室">鼠标移到我这!</span>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

2、提示框显示位置

• 默认情况下，提示框会出现在元素的底部。可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。

• 在小尺寸的屏幕上，提示框的宽度是 100%。

• 实例

  <span data-tooltip class="has-tip tip-top" title="Qian Chia 工作室!">顶部</span>
  <span data-tooltip class="has-tip tip-bottom" title="Qian Chia 工作室!">底部</span>
  <span data-tooltip class="has-tip tip-left" title="www.qianchia.com">左边</span>
  <span data-tooltip class="has-tip tip-right" title="www.qianchia.com">右边</span>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

3、圆角提示框

• .radius 和 .round 类用于设置圆角提示框：

• 实例

  <span data-tooltip class="has-tip" title="Qian Chia 工作室!">默认</span>
  <span data-tooltip class="has-tip radius" title="Qian Chia 工作室!">圆角</span>
  <span data-tooltip class="has-tip round" title="Qian Chia 工作室!">圆形</span>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗