Is it possible to make pure CSS tooltips that display after a delay?

Question

A friend has a memory problem, so I sometimes create CSS overlays for him that provide tooltips to help him with his tasks. Because these are overlays, modifying the underlying HTML or Javascript is not possible.

Creating pure CSS tooltips is trivial, but they appear instantaneously when the cursor hovers over the item.

How can one create CSS tooltips that appear only after hovering over the target item for x seconds?

The solution only needs to work with Firefox, but cross-browser implementation is welcomed as well.

Answer 1

It can be done with a 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

You can try -moz-transition-delay: 1s(or whatever num), and add other prefixes (-webkit, -o etc.) if you want cross-browser.