CSS Hover Popup with Fade-in and -out

Question

I want to implement a CSS-only popup for an image, which should be displayed when the user hovers with the mouse over that image. After reading here, for example in this thread, I came up with this solution:

a.tooltip span {
    width: 250px; 
    border: #000 1px solid;
    background: #F8F8F8;
    display: none;
    padding: 10px;
    z-index: 1000000;

    opacity: 0;
    transition: 750ms all;
}
a.tooltip:hover span {
    display: inline;
    position: absolute;
    top: 10px;
    left: 25px;
    outline: none;
    text-decoration: none;
    font-size: 70%;
    color: #000;

    opacity: 1;
}

However, this solution does not make the popup fade-in, it simply pops up without any delay. Also, I want the popup to fade-out when when user moves away the mouse cursor again.

Any ideas what I am doing wrong, or what I should rather try instead?

PS: This is how I call the code:

<a href="#" class="tooltip">
  <img src="questionmark.png" />
  <span>Tooltip Text.</span>
</a>

Hmm, would you be able to add the relevant HTML structure so it's easier for people to reproduce the problem you're facing? — Serlite, May 19 '16 at 14:17
The transition is in the ``, not in the tooltip, and the transition is not in the `:hover` state. — Marcos Pérez Gude, May 19 '16 at 14:18
Hi Matthias, your code doesn't reflect any of the accepted answer is the link you reference. There are 3 methods on that post for you to try. — David, May 19 '16 at 14:20

fnune · Accepted Answer · 2016-05-19T14:36:13.243

2

You can't add a transition to an element with display:none; you must do it like this:

a.tooltip span {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 250px; 
    border: #000 1px solid;
    background: #F8F8F8;
    padding: 10px;
    z-index: 1000000;
    display: inline;
    opacity: 0;
    transition: 750ms all;
}
a.tooltip:hover span {
    outline: none;
    text-decoration: none;
    font-size: 70%;
    color: #000;
    opacity: 1;
}

Just use opacity, that's transition-able. Live example: https://jsfiddle.net/wbpbcyfz/1/

edited May 19 '16 at 14:36

answered May 19 '16 at 14:20

fnune

5,256
1
21
35

Interesting. In your JSFiddle example it does work as expected, incl. IE11 (which I need to support mainly). However, when I c&p your code, without any changes, it does not work. The span is shown already when I am loading the page... – Matthias May 19 '16 at 14:35
You must have more CSS that's interfering, maybe you have `display:none;` or `opacity:0;` on a parent element. Use chrome dev tools (F12) to inspect the element. – fnune May 19 '16 at 14:36
I'd like to hear more input from you on the topic. – fnune May 19 '16 at 14:48
Apparently IE does not use the `opacity` attribute. In dev tools (F12) it is underlined in red, as if the parameter is invalid. – Matthias May 19 '16 at 15:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112418/discussion-between-fausto-na-and-matthias). – fnune May 19 '16 at 15:10

CSS Hover Popup with Fade-in and -out

1 Answers1