HTML 标题属性 - 减少延迟并在点击时显示

Question

如何减少通过 html标题属性显示咨询信息之前发生的延迟，而无需编写脚本？：

\n

\r\n

\r\n

<p>\n  Hover over the icon at the end of this sentence\n  and notice the delay that occurs before the \n  advisory information is displayed.\n  <span title="Any way to make this instant?">\xe2\x93\x98</span>\n </p>

\r\n

\r\n

\r\n

\n

如果您可以的话，这将是 HTML 的一个很好的功能：

\n

\n
1. 调整延迟。
\n
2. 还显示在click（而不是仅显示在hover）上。
\n

\n

我知道如何用 Javascript 实现这一点，所以我只对 HTML 和 CSS 解决方案感兴趣。

\n

Answer 1

要减少延迟并立即显示标题，您可以使用 CSS::after选择器来执行此操作。

\n

HTML：（title将属性更改为data-title）

\n

<p>\n  Hover over the icon at the end of this sentence\n  and notice the delay that occurs before the \n  advisory information is displayed.\n    <span data-title="Anyway to make this instant?">\xe2\x93\x98</span> \n</p>\n

\n

CSS：

\n

span \n{\n    position: relative;\n}\n\nspan:hover::after \n{\n    content: attr(data-title);\n    padding: 5px;\n    width: 250px;\n    border: 1px solid #000;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    background: #dc143c;\n    color: white;\n}\n

\n

演示：

\n

\r\n

\r\n

<p>\n  Hover over the icon at the end of this sentence\n  and notice the delay that occurs before the \n  advisory information is displayed.\n    <span data-title="Anyway to make this instant?">\xe2\x93\x98</span> \n</p>\n

\r\n

\r\n

\r\n

\n