有时您需要向网站用户提供更多信息，但页面上的资源却不足。您始终可以包含指向其他页面的链接，但在许多情况下，添加一个简单的 WordPress 工具提示来显示用户需要的所有信息是最方便的。
使用 WordPress 工具提示（也称为 CSS 悬停工具提示），访问者需要的所有信息都可以通过将鼠标“悬停”在正确的元素上来获得。
在本文中，我们将向您展示一些我们最喜欢的 CSS 悬停工具提示实用示例。然后，我们教您如何在不使用插件的情况下将它们添加到您的网站。
让我们深入挖掘！
CSS Hover Tooltips 简介
WordPress 工具提示的概念很简单。它们是浮动容器，当您将鼠标悬停在特定元素上时，它们会“弹出”。
通常悬停工具提示提供您不想包含在原始设计中的附加信息。
例如，如果您正在构建定价表，工具提示可以帮助您分解每个功能的作用，而不会占用大量设计空间：
其他用例包括词定义、添加内容来源、编辑评论、地图和你可以想到的几乎所有其他元素。
两种添加WordPress工具提示的方式
在向您的网站添加工具提示时，WordPress 允许您使用多种方法。您可以手动执行此操作（涉及添加一些代码），或使用插件。
我们将首先向您展示如何使用免费的 WordPress 工具提示插件添加工具提示。然后，我们将深入研究手动 CSS 方法。
1.使用 WordPress 工具提示插件
使用插件的全部意义在于节省您手动添加功能的时间。考虑到这一点，Shortcodes Ultimate 为 WordPress 用户提供了最简单的工具提示实现之一。
启用该插件后，您将可以访问许多可用于添加任何内容的短代码，包括按钮、滑块、图像轮播、分隔线等。
当然，工具提示是 Shortcodes Ultimate 支持的元素列表之一。更好的是，每个短代码都可以使用内置设置和 CSS 完全自定义。
首先，打开要添加第一个 WordPress 工具提示的页面的块编辑器。然后，在任何现有模块的菜单上寻找新的“插入简码”按钮：
您将立即看到可用简码列表。选择“工具提示”选项：
< p> 现在您可以自定义工具提示的样式。我们决定采用基本的深色设计，并将其放置在鼠标悬停的元素上方：
注意你也可以配置工具提示的行为方式。默认选项将隐藏容器和文本，直到将鼠标悬停在其父元素上。您还可以配置工具提示，以便除非您单击父元素，否则它们不会显示，但这对您来说会很麻烦
在代码块编辑器中，新的短代码如下所示：
如果您在前端预览，工具提示的工作方式如下：
请记住，您几乎可以在任何地方使用正确的简码添加工具提示。这适用于常规文本、表格、图标和其他呃元素。
但是，根据经验，您希望添加一些视觉指示器让用户知道他们应该将鼠标悬停在父元素上。下划线或颜色变化效果很好。您还可以使用消息表情符号 (ℹ️)。
2.手动设置 CSS 悬停工具提示
在上一节中，我们讨论了如何使用插件添加悬停工具提示。该插件实际上为您设置了各种 CSS 样式。这意味着您可以从设置列表中进行选择，插件将生成必要的简码。
但是，没有理由不能使用代码手动完成此操作。向主题添加一些新 CSS 类的最简单方法是使用 WordPress Customizer。
要访问定制器，请从仪表板导航到“外观 > 主题”，然后在左侧菜单底部查找“其他 CSS”选项卡：
接下来，为你的主题添加三个CSS类：
< ol>
这是代码的基本示例:
.tooltip-box {
position: relative
display: inline-block;
.tooltip-box .tooltip-text {
可见性：隐藏；
宽度：100px；
背景颜色：黑色；
颜色：#fff；
文本对齐：居中；
填充：6px 0;
position:absolute;
z-index:1;
.tooltip-box:hover.tooltip-text{
visibility:visible;
简而言之，这段代码生成一个空容器并设置它相对于父元素的位置。接下来，它为要包含的文本添加一些样式，例如填充、对齐方式、颜色和整体宽度。最后，它将容器设置为隐藏，直到将鼠标悬停在父元素上。
将自定义 CSS 保存到主题后，您可以从网站上的任何页面调用工具提示。为此，请访问要添加工具提示的页面的块编辑器。
选择要添加第一个工具提示的块，然后转到“另存为 HTML”选项：
现在，添加一个包含工具提示的父文本和您希望它包含的信息的 div：
顶部文本
您的工具提示文本就在这里！
