在 HTML 中创建一个简单的工具提示按钮

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中创建一个简单的工具提示按钮

作者：迹忆客最近更新：2023/05/05 浏览次数：

超文本标记语言，也称为 HTML，是一种用于创建网页的标准标记语言。 Web 浏览器关于如何在网页上显示文本、图片和其他多媒体的命令由 HTML 元素提供。

HTML 中的工具提示

在 HTML 中，工具提示用于提供有关所选元素的更多信息；它可能是一个按钮或一个词。当用户使用工具提示将鼠标移到某个元素上以显示有关该元素的特定信息时，这可以在鼠标悬停效果上完成。

让我们看看如何向按钮添加工具提示。

我们可以通过使用 button 元素的 title 属性向按钮添加工具提示。在title属性的逗号内输入详细信息，希望在用户移动鼠标时显示。

<button title="Click Here"> Button </button>

使用 HTML 的按钮的基本工具提示

在 HTML 中创建一个按钮。然后，将 title 属性添加到按钮元素。

示例代码如下。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a simple button & Adding a tooltip to button -->
            <button title="Click Here">Button</button>
    </body>
</html>

如您所见，当鼠标移到按钮上时，会出现工具提示。

使用 HTML 和 CCS 的按钮高级工具提示

让我们看看按钮的其他高级工具提示示例。

首先，使用容器元素 (<div>) 创建一个按钮并添加一个工具提示类。此 <div> 将在用户将鼠标悬停在其上时显示工具提示文本。

带有 class="tooltiptext" 的 <span> 样式内联元素用于包含工具提示文本。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

创建一个 CSS 文件

让我们创建一个名为 style.css 的 CSS 文件，并通过在 HTML 的 <head> 标记之间包含以下语法将其链接到 HTML 文件。

<link rel="stylesheet" href="style.css">

让我们使用 CSS 为工具提示按钮设置样式。按钮的样式包含在 .button 类中。

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

.tooltip 类用于显示工具提示的位置。

.tooltip {
    position: relative;
    display: inline-block;
}

工具提示文本存储在 .tooltiptext 类中。它通常是隐藏的，但当您将鼠标悬停在它上面时会变得可见。

此外，我们为其添加了一些基本样式，如下所示。

120px 宽度
黄色背景
白色文字颜色
使文本居中的能力
5px 的顶部和底部填充

由于 CSS border-radius 特性，工具提示文本具有圆角边缘。

当用户将光标拖到带有类工具提示的 <div> 元素上时，将使用悬停选择器显示工具提示文本。

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

定位工具提示

工具提示可以显示在按钮的右侧、左侧、底部和顶部。让我们看看如何去做。

下面的示例显示了如何在左侧或右侧显示工具提示。 top 属性的值为负 5 像素。

该值是通过考虑填充来计算的。如果您愿意增加填充，请增加 top 属性。

工具提示靠右

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

可以看到，当鼠标向任意方向移动时，工具提示只会出现在右侧。

工具提示靠左

.tooltip .tooltiptext {

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}
  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

可以看到，当鼠标向任意方向移动时，工具提示只会出现在左侧。

下面的示例显示了如何在顶部或底部显示工具提示。 margin-left 属性的值为负 60 像素。

该值按工具提示宽度的一半计算 (120/2 = 60)。

工具提示靠顶部

.tooltip .tooltiptext {
     /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-top: 40px;
    margin-left: 120px;
 }

如您所见，当鼠标向任何方向移动时，工具提示仅出现在顶部。

工具提示靠底部

.tooltip .tooltiptext {
 /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgb(235, 182, 38);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

  /* When you mouse over the tooltip container, the tooltip text is displayed. */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Tooltip</title>
    </head>
    <body>
        <!-- creating a button -->
        <div class="tooltip">
            <button class="button">Button
                <span class="tooltiptext"> Click Me </span>
            </button>
        </div>
    </body>
</html>

/* Style for button*/
.button {
    position: relative;
    background: #151a5f;
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    margin-left: 120px;
 }

可以看到，当鼠标向任意方向移动时，工具提示只会出现在底部。

总结

本文讨论了如何使用 HTML 创建一个简单的工具提示按钮。然后，我们讨论了使用 HTML 和 CSS 创建高级工具提示按钮并在按钮的右侧、左侧、顶部和底部显示工具提示。

上一篇：HTML 三列布局

下一篇：HTML 创建可编辑的表格

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

HTML 中的 role 属性

发布时间：2023/05/06 浏览次数：124 分类：HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍，role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间：2023/05/06 浏览次数：188 分类：HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间：2023/05/06 浏览次数：154 分类：HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间：2023/05/06 浏览次数：140 分类：HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间：2023/05/06 浏览次数：70 分类：HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素，我们可以使用它在一个或多个选定元素之前插入内容。它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间：2023/05/06 浏览次数：54 分类：HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。我们将探索垂直和水平滚动，并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间：2023/05/06 浏览次数：153 分类：HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体，但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间：2023/05/06 浏览次数：149 分类：HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框复选框是一个交互式框，可以切换以表示肯定或否定。它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间：2023/05/06 浏览次数：198 分类：HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。但是，首先，让我们简要介绍一下复选框控件。

迹忆客专注技术分享