CSS 工具提示在 WordPress 页面上不起作用 [英] CSS Tooltip will not work on WordPress page

问题描述

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

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

.tooltip {位置:相对；显示:内联块；边框底部:1px 黑色虚线；}.tooltip .tooltiptext {可见性:隐藏；宽度:120px；背景颜色:黑色；颜色:#fff;文本对齐:居中；边框半径:6px；填充:5px 0;/* 定位工具提示 */位置:绝对；z-索引:1；}.tooltip:悬停 .tooltiptext {可见性:可见；}

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

<p>将鼠标移到下面的文本上:</p><div class="tooltip">悬停在我身上<span class="tooltiptext">工具提示文本</span>

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

感谢您的帮助.

<小时>

抱歉，我认为从 CSS 教程页面的参考中可以很明显地看出该类.编辑以包含上述类.

解决方案

只需将您的类名称从工具提示更改为其他名称...例如:

.tooltip123 {位置:相对；显示:内联块；}.tooltip123 .tooltiptext123 {可见性:隐藏；宽度:120px；背景颜色:黑色；颜色:#fff;文本对齐:居中；边框半径:6px；填充:5px 0;/* 定位工具提示 */位置:绝对；z-索引:99999；}.tooltip123:悬停 .tooltiptext123 {可见性:可见；}

这将起作用 I.A.

I'm following the very easy and clear instructions on the CSS Tutorial page: https://www.w3schools.com/css/css_tooltip.asp

The CSS classes were entered in the stylesheet for the site:

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

Even for the very basic first option, nothing shows for text in the inline container, e.g. nothing shows after the first line below:

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

I've tried this using two different WordPress sites, one with Avada Theme and another with Beaver Builder Theme. Same thing happens with both. I'm pretty sure I'm not doing anything wrong. And this is basic CSS.

Thanks for any help.

---

Sorry, I thought the class would be obvious from the reference to the CSS Tutorial page. Edited to included the classes above.

解决方案

just change your class names from tooltip to something else... Like:

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

This will work I.A..

这篇关于CSS 工具提示在 WordPress 页面上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！