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

Question

我正在按照CSS Tutorial页面上非常简单明了的说明进行操作：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 Tutorial页面的引用中可以看出这个类很明显。编辑包括上面的类。

Answer 1

如果它在普通的html页面中工作但在Wordpress中不起作用，那么你就会与其他Wordpress代码和样式发生冲突，这就是需要考虑的很多外部因素。这是您开发调试技能的地方:-)

两个最明显的可能性（对我来说无论如何）是：

1. z-index太低了

您的工具提示可能被具有更高z-index的元素隐藏。在我看来，这是最可能出现的情况。

如何调试：将z-index更改为非常高的值，例如： 99999以确保它将出现在其他一切之上

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

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

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

如何调试：将类的名称更改为唯一的名称。对于调试，请使用随机的东西，以确保它不会被其他任何东西使用，例如： Rgrt4522dFE3dd。

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

Answer 2

只需将您的类名从工具提示更改为其他内容...

.tooltip123 {
    position: relative;
    display: inline-block;

}

.tooltip123 .tooltiptext123 {
    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: 99999;
}

.tooltip123:hover .tooltiptext123 {
    visibility: visible;
}

这将工作I.A ..