Add css fade in fade out in tooltip box - css

Question

I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/

Answer 1

How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}

Answer 2

What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}