是否可以制作在延迟后显示的纯 CSS 工具提示？

Question

一位朋友有记忆问题，因此我有时会为他创建 CSS 叠加层，提供工具提示以帮助他完成任务。因为这些是叠加层，所以不可能修改底层的 HTML 或 Javascript。

创建纯 CSS 工具提示是微不足道的，但是当光标悬停在项目上时，它们会立即出现。

如何创建仅在将鼠标悬停在目标项目上x秒后才出现的 CSS 工具提示？

该解决方案只需要与 Firefox 配合使用，但也欢迎跨浏览器实现。

Answer 1

它可以通过CSS 转换延迟来完成。

<style>
a:after {
    opacity: 0;
    content: "";
}
a:hover:after { 
    opacity: 1;
    transition: opacity  0s linear 1s;
    content: " (Forgetfulness is a form of freedom. - Kahlil Gibran)";
}
</style>
<a href="#" class="tooltip">What am I?</a>