CODEWITHSUNDEEP
cssfirefoxtooltipoverlay
Amazon Dies In Darkness
Amazon Dies In Darkness

Reputation: 5833

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

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.

Upvotes: 8

Views: 14830

Answers (2)

Meiko Rachimow
Meiko Rachimow

Reputation: 4724

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>

Upvotes: 9

DWatson
DWatson

Reputation: 53

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

Upvotes: 3

Related Questions