CSS 工具提示不适用于 WordPress 页面

Question

我正在遵循 CSS 教程页面上非常简单明了的说明:https://www.w3schools.com/css/css_tooltip.asp

站点的样式表中输入了 CSS 类:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

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

.tooltip:hover .tooltiptext {
visibility: visible;
}

即使对于最基本的第一个选项，内联容器中的文本也不会显示任何内容，例如下面第一行之后没有任何显示:

<p>Move the mouse over the text below:</p>    
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

我已经尝试使用两个不同的 WordPress 网站，一个使用 Avada 主题，另一个使用 Beaver Builder 主题。两者都会发生同样的事情。我很确定我没有做错任何事。这是基本的 CSS。

感谢您的帮助。

---

抱歉，我认为从对 CSS 教程页面的引用中可以明显看出该类。编辑以包含上述类。

Answer 1

如果它在纯 html 页面中工作但在 Wordpress 中不起作用，那么你与 Wordpress 代码和样式的其余部分发生冲突，这是一个很多需要考虑的外部因素.这是您培养调试技能的地方:-)

两种最明显的可能性(无论如何对我来说)是:

<强>1。 z-index 太低

您的工具提示可能会被具有更高 z-index 的元素隐藏。我认为这是最有可能发生的情况。

如何调试: 将您的 z-index 更改为非常高的值，例如99999 以确保它会出现在其他所有内容之上

如果这是问题所在，您仍应将 z-index 减小到足以使其显示在顶部的数字。

<强>2。您有一个插件或主题使用与您的代码相同的类名

这意味着应用于它们的工具提示和工具提示文本类的任何样式也可能会影响您的样式。例如他们可能使用 -99999px 的绝对定位将工具提示隐藏在屏幕外

如何调试: 将类的名称更改为唯一的名称。对于调试，使用一些随机的东西，这样你就可以确定它不会被其他任何东西使用，例如Rgrt4522dFE3dd。

无论这是否是问题所在，您都应该将它们重命名为不太通用的名称，例如在所有名称前加上一个唯一引用。养成为类和任何其他全局名称使用唯一名称的习惯是个好主意，以防止发生冲突。