文字hover提示

创建者：

流光

Fork(复制)

AI补全

图库

下载

嵌入

BUG反馈

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
 <div tooltip="最大呼气压" class="tableList_name">
      MEP<span class="tableList_value_unit">(kPa)</span>
  </div>
</body>

</html>

编辑器加载中

style.css

            
                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

            
            /* 名称 */
    
    .tableList_name {
        width: 45%;
        padding-left: 29px;
        font-size: 27px;
        color: rgba(0, 0, 0, 1);
        margin-top: 50px;
    }
    /* 值 */
    
    .tableList_value {
        text-align: center;
        width: 35%;
        font-size: 30px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
    }
    /* 范围 */
    
    .tableList_value_unit {
        color: #b3b2b2;
    }

/* tooltip提示 */
    
    [tooltip] {
        position: relative;
        display: inline-block;
    }
    /* 小箭头 */
    
    [tooltip]::before {
        content: "";
        position: absolute;
        border-width: 4px 6px 0 6px;
        border-style: solid;
        border-color: transparent;
        border-top-color: black;
        z-index: 99;
        opacity: 0;
        top: -5px;
        left: 27%;
        transform: translateX(-50%);
    }
    /* 提示框 */
    
    [tooltip]::after {
        content: attr(tooltip);
        position: absolute;
        background: black;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        padding: 4px 8px;
        /* 宽度由内容决定 */
        width: max-content;
        font-size: 24px;
        /* 让事件传递给下面的元素 */
        pointer-events: none;
        z-index: 99;
        opacity: 0;
        left: 50%;
        top: -5px;
        transform: translateX(-77%) translateY(-100%);
    }
    
    [tooltip]:hover::after,
    [tooltip]:hover::before {
        animation-name: fade;
        animation-duration: 3s;
    }
    
    @keyframes fade {
        0% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中

预览

控制台