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 ..

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

2 个答案: