fade in and out on simple css tooltip

Question

Noobish question. Trying to make a simple css tooltip to fade in and out but cant get it to work. searched a lot but couldn't find simple answer. I'm assuming i put the transition css3 in the wrong place but its not working in the others either... ``` ``` html ```

```

Accepted Answer

- You don't need both `:before` and `:after`.

- You have to first define `:after` content and its styles, with transition.

- Then define `:after` styles on `:hover` with only the transition properties (e.g. opacity).

Demo: http://jsfiddle.net/abhitalks/aRzA3/1/

CSS:

```
.tooltip:after {
    content: attr(title); /* define content here */
    ...
    opacity: 0; /* define initial transition property */
    -webkit-transition: opacity 1s ease-in-out; /* define transitions */
    transition: opacity 1s ease-in-out;
}
.tooltip:hover:after {
    opacity: 1; /* provide only the final transition property */
}
```

fade in and out on simple css tooltip

Solution

Problem