CSS 工具提示在 WordPress HTML 文件中不起作用

Posted 2023-05-08

【中文标题】CSS 工具提示在 WordPress HTML 文件中不起作用

【英文标题】：CSS tooltip doesn't work in WordPress HTML file

【发布时间】：2018-06-29 17:37:04

【问题描述】：

现在我正在为我们的临时 WordPress 网站制作格式良好的 CSS 文件，直到新网站准备就绪。在制作 CSS 样式表和漂亮的 html 文件后，我发现如果它们在帖子中内联，它们在 WordPress 中不起作用，而是我不得不将它们放在单独的原始 HTML 文件中（使用“WP File Manager”插件来将它们上传到单独的文件夹。）之后，它们在站点上的显示方式与它们在我的硬盘或我的个人 (LAMP) 测试站点（使用 Safari 10.1.1 OS X）上的外观相匹配，如果我显示源在我的浏览器中，它看起来与我上传的相同。

然后我按照 w3schools 上的教程使用 CSS 创建了一个工具提示样式。在样式表中，我将“编辑”定义为我对原始文本所做的更改的样式

.edit  /* changes made, */
    color: navy;
    position: relative;
    display: inline-block;

.edit .tooltip 
    font-size: medium;
    visibility: hidden;
    background-color: navy;
    color: white;
    text-align: center;
    width: 20em;
    padding: 0.5em;
    border-radius: 6px;
    position: absolute;
    z-index: 1;

.edit:hover .tooltip
    visibility: visible;

然后（根据教程）我在“编辑”文本中添加“工具提示”文本

<h5 class="edit">¶ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>

在我的硬盘和我的个人网站上，工具提示是不可见的，直到我将鼠标悬停在它上面然后它会弹出一个气球。

但是当我将它加载到 WordPress 上时，隐藏的文本总是可见的内联，好像“工具提示”样式被忽略了。为了暂时解决这个错误（所以我不必重新编辑 HTML 文件），我可以通过将工具提示样式定义为来禁用和隐藏所有工具提示

.edit .tooltip 
    visibility: hidden;
    font-size: 0%;

这表明“工具提示”正在被看到，但隐藏部分的某些方面在 WordPress.com 上的解析方式不同。

那么，WordPress 是否可以使用某些 CSS 样式或属性来显示我的文本？有什么方法可以用 CSS 抢先覆盖它吗？我应该编写一个通过并手动隐藏工具提示的 javascript 吗？

我应该尝试什么实验让它消失？

PS：这与CSS Tooltip will not work on WordPress page 的问题不同，因为我的文本是内联显示的。

【参考方案1】：

你是说：

但是当我将它加载到 WordPress 上时，隐藏的文本总是可见的内联，好像“工具提示”样式被忽略了。

这表明带有 tooltip 样式的文件在加载其他 css 样式之前加载。因此，最后加载的文件会覆盖之前加载的文件。

对于调试，尝试将!important 添加到您的工具提示样式规则中，如下所示：

.edit .tooltip 
    visibility: hidden !important;
    font-size: 0%;

看看是否有任何改变。

然后，修改您的 WordPress 文件，以便最后加载您的工具提示样式。这将允许您删除 !important 标志。 （因为使用该标志不是最佳做法，应尽可能避免）

【讨论】：

非常感谢您的建议。我尝试了 !important 但没有任何变化。我将不得不检查并查看如何更改加载样式的顺序。但是，我现在发现我的本地硬盘驱动器上至少有一个浏览器（Brave 0.19）存在问题，根本没有任何 WordPress。<a name="Benediction"></a><dt><span class="caps">The</span> grace of our Lord Jesus Christ, <span class="addcross">&#10016<span class="tooltip">The sign of the cross is historically made for the Benediction.</span></span> …<i>Amen.</i></dt>

很抱歉出现格式问题。我看到隐藏的工具提示文本只有直接的 HTML，没有其他 CSS/文本加载。所以它暗示了一些更基本的问题，要么是我的 CSS，要么是我如何格式化使用工具提示样式的 HTML。