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

Question

朋友有内存问题，所以我有时会为他创建CSS覆盖，提供工具提示来帮助他完成任务。因为这些是叠加层，所以无法修改底层HTML或Javascript。

创建纯CSS工具提示很简单，但当光标悬停在项目上时，它们会立即出现。

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

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

Answer 1

可以使用CSS transition delay完成。

<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>

Answer 2

如果您想要跨浏览器，可以尝试-moz-transition-delay: 1s（或任何数量），并添加其他前缀（-webkit，-o等）。