文章: 阅读:

CSS Tooltip 提示工具

CSSCSS

前言

  • 使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。

1、基础提示框

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

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            
            /* 定位 */
            position: absolute;
            z-index: 1;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
    1
    2
    3
    4
    <div class="tooltip">
        鼠标移动到这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果


    鼠标移动到这
    提示文本

  • 解析

    • HTML 使用容器元素 (如 <div>) 并添加 “tooltip” 类，在鼠标移动到 <div> 上时显示提示信息。
    • 提示文本放在内联元素上（如 <span>）并使用 class="tooltiptext"。
    • CSS tooltip 类使用 position: relative;, 提示文本需要设置定位值 position: absolute;。
    • tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
    • CSS3 border-radius 属性用于为提示框添加圆角。
    • :hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。

2、定位

2.1 右侧提示框

  • 以下实例中，提示工具显示在指定元素的右侧（left: 105%;）。

  • 注意 top: -5px; 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

  • 如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

  • 在提示框显示在左边的情况也是这个原理。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 105%;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <h2>右侧提示工具</h2>
    <p>鼠标移动到以下元素:</p>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    右侧提示工具


    鼠标移动到以下元素:

    鼠标移动到我这
    提示文本

2.2 左侧提示框

  • 显示在左侧

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 105%;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <h2>左侧提示工具</h2>
    <p>鼠标移动到以下元素:</p>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    左侧提示工具


    鼠标移动到以下元素:

    鼠标移动到我这
    提示文本

2.3 顶部提示框

  • 如果想要提示工具显示在头部和底部。需要使用 margin-left 属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐，即：width/2 (120/2 = 60)。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        .tooltip .tooltiptext {
            width: 120px;

            /* 定位 */
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: -60px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <h2>头部提示工具</h2>
    <p>鼠标移动到以下元素:</p>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    头部提示工具


    鼠标移动到以下元素:

    鼠标移动到我这
    提示文本

2.4 底部提示框

  • 显示在底部

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        .tooltip .tooltiptext {
            width: 120px;

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: 100%;
            left: 50%;
            margin-left: -60px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <h2>底部提示工具</h2>
    <p>鼠标移动到以下元素:</p>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    底部提示工具


    鼠标移动到以下元素:

    鼠标移动到我这
    提示文本

3、添加箭头

  • 可以用 CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

3.1 右侧提示框/左侧箭头

  • 以下实例是左侧的箭头实例。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 110%;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>右侧提示框/左侧箭头</h2>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    右侧提示框/左侧箭头


    鼠标移动到我这
    提示文本

3.2 左侧提示框/右侧箭头

  • 以下实例是右侧的箭头实例。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 110%;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>左侧提示框/右侧箭头</h2>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    左侧提示框/右侧箭头


    鼠标移动到我这
    提示文本

3.3 顶部提示框/底部箭头

  • 以下实例演示了如何为显示在顶部的提示工具添加底部箭头。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            bottom: 150%;
            left: 50%;
            margin-left: -60px;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>顶部提示框/底部箭头</h2>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    顶部提示框/底部箭头


    鼠标移动到我这
    提示文本

  • 解析

    • 在提示工具内定位箭头: top: 100%;, 箭头将显示在提示工具的底部。left: 50%; 用于居中对齐箭头。

    • 注意：border-width 属性指定了箭头的大小。如果修改它，也要修改 margin-left 值。这样箭头才能居中显示。

    • border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

3.4 底部提示框/顶部箭头

  • 以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            top: 150%;
            left: 50%;
            margin-left: -60px;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <h2>底部提示框/顶部箭头</h2>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    底部提示框/顶部箭头


    鼠标移动到我这
    提示文本

4、淡入效果

  • 可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <style>
        .tooltip .tooltiptext {

            /* 定位 */
            position: absolute;
            z-index: 1;
            bottom: 120%;
            left: 50%;
            margin-left: -60px;

            /* 淡入 - 1 秒内从 0% 到 100% 显示: */
            opacity: 0;
            transition: opacity 1s;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <h2>提示工具淡入效果</h2>
    <p>鼠标移动到以下元素，提示工具会在 1 秒内从 0% 到 100% 完全显示。</p>

    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>

  • 效果

    提示工具淡入效果


    鼠标移动到以下元素，提示工具会在 1 秒内从 0% 到 100% 完全显示。


    鼠标移动到我这
    提示文本

  • 解析

    • 设置提示文本的 opacity 属性值为0：表示提示文本常态下是不可见的。
    • 设置提示文本的 transition 属性为 opacity 1s：可以理解为 transition 属性指向的是 opacity 属性的值的改变这一动作，且在 1s 的时间内完成该动作，即：所有触发该元素的 opacity 属性的值的改变的动作都将在 1s 内完成。
    • 设置触发动作 hover：hover 时 opacity 值为 1，即触发淡入效果。

5、完整提示框实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <style>
        .tooltip {
            text-transform: uppercase;
            background: #ececec;
            color: #555;
            cursor: help;
            font-family: "Gill Sans", Impact, sans-serif;
            font-size: 20px;
            margin: 100px 75px 10px 75px;
            padding: 15px 20px;
            position: relative;
            text-align: center;
            width: 200px;
            -webkit-transform: translateZ(0);
            /* webkit flicker fix */
            -webkit-font-smoothing: antialiased;
            /* webkit text rendering fix */
        }

        .tooltip .tooltiptext {
            background: #1496bb;
            bottom: 100%;
            color: #fff;
            display: block;
            left: -25px;
            margin-bottom: 15px;
            opacity: 0;
            padding: 20px;
            pointer-events: none;
            position: absolute;
            width: 100%;
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            -ms-transform: translateY(10px);
            -o-transform: translateY(10px);
            transform: translateY(10px);
            -webkit-transition: all .25s ease-out;
            -moz-transition: all .25s ease-out;
            -ms-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        }

        /* This bridges the gap so you can mouse into the tooltiptext without it disappearing */
        .tooltip .tooltiptext:before {
            bottom: -20px;
            content: " ";
            display: block;
            height: 20px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        /* CSS Triangles - see Trevor's post */
        .tooltip .tooltiptext:after {
            border-left: solid transparent 10px;
            border-right: solid transparent 10px;
            border-top: solid #1496bb 10px;
            bottom: -10px;
            content: " ";
            height: 0;
            left: 50%;
            margin-left: -13px;
            position: absolute;
            width: 0;
        }

        .tooltip:hover .tooltiptext {
            opacity: 1;
            pointer-events: auto;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
        }

        /* IE can just show/hide with no transition */
        .lte8 .tooltip .tooltiptext {
            display: none;
        }

        .lte8 .tooltip:hover .tooltiptext {
            display: block;
        }
    </style>
    1
    2
    3
    4
    <div class="tooltip">
        I have a tooltip.
        <div class="tooltiptext">I am a tooltiptext!</div>
    </div>

  • 效果


    I have a tooltip.
    I am a tooltiptext!

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、基础提示框
  3. 3. 2、定位
    1. 3.1. 2.1 右侧提示框
    2. 3.2. 2.2 左侧提示框
    3. 3.3. 2.3 顶部提示框
    4. 3.4. 2.4 底部提示框
  4. 4. 3、添加箭头
    1. 4.1. 3.1 右侧提示框/左侧箭头
    2. 4.2. 3.2 左侧提示框/右侧箭头
    3. 4.3. 3.3 顶部提示框/底部箭头
    4. 4.4. 3.4 底部提示框/顶部箭头
  5. 5. 4、淡入效果
  6. 6. 5、完整提示框实例
隐藏目录