Foundation 提示框

前言

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

1、提示框

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

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <a href="#" data-tooltip class="button" title="www.qianchia.com">鼠标移到我这!</a>

    <!-- 初始化 Foundation JS -->
    <script>
    $(document).ready(function () {
    $(document).foundation();
    })
    </script>
  • 效果 🔗

1.1 加粗文本

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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%。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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 类用于设置圆角提示框:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>
  • 效果 🔗

文章目录
  1. 1. 前言
  2. 2. 1、提示框
    1. 2.1. 1.1 加粗文本
  3. 3. 2、提示框显示位置
  4. 4. 3、圆角提示框
隐藏目录