添加css淡入淡出在工具提示框

Question

我有一個工具提示框，它工作正常。現在，我想在工具提示框彈出和退出時添加淡入淡出功能。

<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> 

演示：http://jsfiddle.net/squidraj/FHUbA/

Answer 1

這個怎麼樣：

http://jsfiddle.net/Roobyx/FHUbA/45/

（您可以修復後的樣式）

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); 
} 

Answer 2

這個怎麼樣？

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; 
}