CSS工具提示将无法在WordPress页面上工作

mbzjlibv 于 2023-02-10 发布在 WordPress

关注(0)|答案(3)|浏览(147)

我正在遵循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教程页面的引用中会很明显。编辑了上面的类。

css

来源：https://stackoverflow.com/questions/45740828/css-tooltip-will-not-work-on-wordpress-page

3条答案

按热度按时间

bwitn5fc1#

如果它能在纯html页面中工作，但在WordPress中不工作，那么你就与WordPress的其他代码和样式有冲突，这是一个 * 很多 * 外部因素要考虑。这是你发展调试技能的地方：-）
两个最明显的可能性（至少对我来说）是：

1. z索引太低

你的工具提示可能会被更高z值的元素隐藏，在我看来这是最有可能的情况。

***如何调试：***将z索引更改为非常高的值（例如99999），以确保它显示在所有其他项之上

如果这是问题所在，您仍然应该将z轴减少到刚好足以使其显示在顶部的数字。

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

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

***如何调试：***将类的名称更改为唯一的名称。对于调试，请使用随机名称，以确保它不会被其他任何对象使用，例如Rgrt 4522 dFE 3dd。

不管这是不是问题所在，你应该将它们重命名为不那么通用的名称，比如在所有名称前面加上唯一的引用。养成对类和其他全局对象使用唯一名称的习惯是个好主意，这样可以防止冲突的发生。

赞(0）回复(0）举报 2023-02-10

lsmepo6l2#

只要把你的类名称从工具提示改为其他的......比如：

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

这在内务部行得通。

赞(0）回复(0）举报 2023-02-10

6yt4nkrj3#

这对你来说可能太晚了，但我刚刚遇到这个问题，发现你的问题没有答案。
确保指定.tooltip的元素不具有overflow: hidden、overflow: scroll或overflow: auto规则。

赞(0）回复(0）举报 2023-02-10