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

Question

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

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

一切都可以在PC上正常运行，但是在移动设备上（如果重要的话，我在Android上）完全坏掉了。它的功能就好像根本没有CSS类一样，也就是说，应该将隐藏在工具提示中的文本打印在页面上。

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

工作提示

不起作用的工具提示

Answer 1

如果工具提示不应该出现在移动设备上，则可以使用媒体查询将其隐藏。以下示例是基于您共享的w3school示例中的HTML和CSS完成的。请注意，如果没有工作HTML和CSS的示例，则可能是其他原因覆盖了工具提示并迫使其显示。在这种情况下，您将不得不使用浏览器的开发工具包在移动视图中对其进行检查，以查看可能的结果。

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