CSS - 工具提示

上一页
下一页

CSS 工具提示是当用户将鼠标悬停在元素上时出现的小型弹出框，提供附加信息或更多上下文。工具提示使用 CSS 属性 inset、translateX、translateY 等进行样式设置和定位。在本教程中，我们将学习如何使用 CSS 创建、定位和设置工具提示的样式。

演示工具提示示例

以下部分显示了演示工具提示的示例。当您将鼠标悬停在下面的文本上时，工具提示将可见。

顶部工具提示
右侧工具提示
左侧工具提示
底部工具提示

目录


 

如何在 CSS 中创建工具提示？

以下是使用 CSS 和 HTML 创建工具提示的步骤。

  • 设置元素：创建您想要悬停以触发工具提示的元素。这可以是按钮、图像或任何其他 HTML 元素。
  • 创建工具提示文本：使用<span>元素创建工具提示容器，并在其中包含工具提示的文本。请确保最初使用 CSS 中的visibility: hidden属性将其隐藏。
  • 定位工具提示：使用 CSS 定位属性将工具提示元素放置在容器周围的正确位置。这包括在工具提示上设置“position: absolute”，在容器上设置“position: relative”。
  • 设置工具提示样式：通过设置背景颜色、文本颜色、内边距等来自定义工具提示的外观。
  • 在悬停时显示工具提示：应用 CSS 悬停效果来更改用户将鼠标悬停在目标元素上时工具提示的可见性。这将显示工具提示。

基本工具提示

以下示例演示了如何使用 CSS 创建基本的工具提示。当用户将鼠标悬停在文本上时，将显示工具提示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #000;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <h3>Hover over the text below to see the tooltip</h3>

    <div class="tooltip">
        Hover over this text
        <span class="tooltiptext"> This is a tooltip </span>
    </div>
</body>

</html>

工具提示定位

使用 CSS 定位规则，我们可以将工具提示定位在主容器周围的任何位置，例如顶部、底部、左侧或右侧。

要定位工具提示，首先需要将“position: relative;”属性设置为工具提示的元素容器。它允许具有“position: absolute”的子元素相对于元素容器进行定位。可以使用inset属性（如 top、bottom、right 和 left）轻松调整绝对定位元素的位置。

.element {
   position: relative;
}
.tooltip{
    position: absolute;
    top: 50px; 
    left: 50px;
}

工具提示元素将放置在容器元素顶部边框上方 50 像素和左侧边框左侧 50 像素处。

现在让我们来看一下在所有不同方向显示工具提示的示例。

示例

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

<head>
    <style>
        .container{
            display: flex;
            justify-content: space-around;
            margin-top: 10%;
        }
        .tooltip-container {
            position: relative;
        }
        
        .button{
            font-family: san-serif;
            font-weight: bold;
            padding: 2px;
            border-radius: 5px;
            background-color: white;
        }

        .tooltip-container .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Tooltip on top */
        .tooltip-top .tooltip-text {
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Tooltip on bottom */
        .tooltip-bottom .tooltip-text {
            top: 125%;
            left: 50%;
            transform: translateX(-50%); /* To center on top side */
        }

        /* Tooltip on left */
        .tooltip-left .tooltip-text {
            top: 50%;
            right: 125%;
            transform: translateY(-50%);
        }

        /* Tooltip on right */
        .tooltip-right .tooltip-text {
            top: 50%;
            left: 125%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="tooltip-container tooltip-top">
            <button class="button">Top </button>
            <span class="tooltip-text">Tooltip on top</span>
        </div>
        
        <div class="tooltip-container tooltip-right">
            <button class="button">Right </button>
            <span class="tooltip-text">Tooltip on right</span>
        </div>

        <div class="tooltip-container tooltip-left">
            <button class="button">Left </button>
            <span class="tooltip-text">Tooltip on left</span>
        </div>
        
        <div class="tooltip-container tooltip-bottom">
            <button class="button">Bottom</button>
            <span class="tooltip-text">Tooltip on bottom</span>
        </div>
    </div>
</body>

</html>

工具提示箭头

要为工具提示创建一个从工具提示特定侧面出现的箭头，请在工具提示后添加“空”内容，使用伪元素::after和 content 属性。然后可以使用 border 属性来塑造和着色箭头。

/* Arrow styles */
.tooltip-text::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

我们只为边框的一侧设置颜色，这将导致顶部出现三角形边框，因为内容为空。要了解更多关于如何在 CSS 中创建箭头的知识，请访问我们关于CSS 箭头的免费教程。

示例

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

<head>
    <style>
        .container{
            display: flex;
            justify-content: space-around;
            margin: 10%;
        }
        .tooltip-container {
            position: relative;
        }
        
        .button{
            font-family: san-serif;
            font-weight: bold;
            padding: 2px;
            border-radius: 5px;
            background-color: white;
        }

        .tooltip-container .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Tooltip on top */
        .tooltip-top .tooltip-text {
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Tooltip on right */
        .tooltip-right .tooltip-text {
            top: 50%;
            left: 125%;
            transform: translateY(-50%);
        }

        /* Arrow styles */
        .tooltip-text::after {
            content: "";
            position: absolute;
            border-width: 5px;
            border-style: solid;
        }

        /* Arrow pointing up for top tooltip */
        .tooltip-top .tooltip-text::after {
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-color: black transparent transparent transparent;
        }

        /* Arrow pointing left for right tooltip */
        .tooltip-right .tooltip-text::after {
            top: 50%;
            left: -10px;
            transform: translateY(-50%);
            border-color: transparent black transparent transparent;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tooltip-container tooltip-top">
            <button class="button">Top </button>
            <span class="tooltip-text">Tooltip on top</span>
        </div>
        
        <div class="tooltip-container tooltip-right">
            <button class="button">Right </button>
            <span class="tooltip-text">Tooltip on right</span>
        </div>
    </div>
</body>

</html>

淡入工具提示

CSS 淡入工具提示或工具提示动画是一个逐渐出现并带有淡入效果的工具提示，创建了流畅且视觉上吸引人的过渡。

要创建淡入工具提示，首先需要将工具提示元素的不透明度设置为 0，然后对于工具提示元素的悬停状态，将不透明度设置为 1。现在使用transition将不透明度从 0 平滑地更改为 1。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            margin: 10%;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 2s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body style="text-align:center;">
    <div class="tooltip">
        Hover over this text
        <span class="tooltiptext">
            This is a fade-in tooltip
        </span>
    </div>
</body>

</html>

工具提示的优点

  • 工具提示提供额外的信息，而不会使网页凌乱。它们帮助用户更好地理解网页的不同部分。
  • CSS 工具提示可以自定义并放置在不同屏幕和设备的不同位置。这使得它们对于所有类型的网站都很有用，即使是那些在不同屏幕上大小会发生变化的网站。
  • CSS 工具提示高度可定制，它允许开发人员根据网站的设计主题（包括颜色、字体和动画）对其进行样式设置。
  • 实现 CSS 工具提示相对简单，不需要复杂的 JavaScript 或附加库。
打印页面
上一页
下一页
广告