HTML&CSS 秘籍：打造超实用按钮工具提示

玄之 · 发表于 2025-2-11 16:26:03

这段代码创建了一个带有工具提示的按钮，通过 CSS 技术实现了工具提示的显示和隐藏效果，为页面添加了用户交互体验。

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #e8e8e8;
        }

        .tipbox {
            position: relative;
            background: #ffffff;
            color: #000;
            padding: 15px;
            border-radius: 10px;
            width: 100px;
            height: 20px;
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .tooltip {
            position: absolute;
            top: 0;
            font-size: 11px;
            background: #ffffff;
            color: #ffffff;
            padding: 5px 8px;
            border-radius: 5px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .tooltip::before {
            position: absolute;
            content: "";
            height: 8px;
            width: 8px;
            background: #ffffff;
            bottom: -3px;
            left: 50%;
            transform: translate(-50%) rotate(45deg);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .tipbox:hover .tooltip {
            top: -40px;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .tipbox:hover,
        .tipbox:hover .tooltip,
        .tipbox:hover .tooltip::before {
            background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="tipbox">
        <span class="tooltip">新增客户、现场、设备</span>
        <span>新增+</span>
    </div>
</body>
</html>

HTML 结构

tipbox: 创建一个类名为“tipbox”的 div 元素，用于包含按钮和工具提示。
tooltip: 创建一个类名为“tooltip”的 span 元素，用于显示工具提示的内容。
span: 创建一个 span 元素，用于显示按钮的文本内容。

CSS 样式

body: 设置页面的边距、填充、高度、显示方式和对齐方式，背景色为浅灰色。
.tipbox: 设置按钮的样式，包括位置、背景、颜色、内边距、边框半径、宽度、高度、字体大小、对齐方式、阴影和鼠标指针样式。
.tooltip: 设置工具提示的样式，包括位置、字体大小、背景、颜色、内边距、边框半径、阴影、透明度和指针事件。
.tooltip::before: 设置工具提示的三角形箭头样式，包括位置、内容、尺寸、背景和旋转。
.tipbox:hover .tooltip: 设置鼠标悬停在按钮上时工具提示的样式，使其显示并调整位置。
.tipbox:hover, .tipbox:hover .tooltip, .tipbox:hover .tooltip::before: 设置鼠标悬停在按钮上时按钮和工具提示的背景渐变和颜色。