CSS 悬停文本/工具提示在移动设备上损坏

Question

我刚刚在我的网站上添加了一些工具提示。我通过几乎复制粘贴下面教程中的代码来创建它们。

https://www.w3schools.com/css/css_tooltip.asp

在 PC 上一切正常，但在移动设备上(我在 Android 上，如果重要的话)就完全坏了。它的功能就好像 CSS 类根本不存在一样，即应该作为工具提示的一部分隐藏的文本只是打印在页面上。

有人知道我可能做错了什么吗？

工作工具提示

不工作的工具提示

Answer 1

如果工具提示不应出现在移动设备上，则可以使用媒体查询将其隐藏。下面的示例是基于您共享的 w3school 示例中的 HTML 和 CSS 完成的。请注意，如果没有您工作的 HTML 和 CSS 的示例，则可能有其他内容覆盖了工具提示并强制它出现。在那种情况下，您必须使用浏览器的开发工具包在移动 View 中检查它，看看它可能是什么。

@media only screen and (min-width:40em) {
  .tooltip .tooltiptext { display:none;}
}