title: Animating tooltip fade in and out
body: <p>how can I make this tooltip show and hide with fade? I have tried to add:</p>
  
  <pre><code>transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  </code></pre>
  
  <p>but with no luck, here is my code</p>
  
  <p>Tooltip css:</p>
  
  <pre><code>.mainButtonContainer button:hover:after
  {
  
      background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
      border-color: #093466;
      border-radius: 5px 5px 5px 5px;
      border-style: solid;
      border-width: 7px 2px 2px;
      bottom: -5px;
      color: #093466;
      padding: 5px 15px;
      position: absolute;
      width: 113px;
      z-index: -1;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;button  id=mgf_main1 type="button" onclick="loadData(1)"&gt;
      &lt;img src="Images/Magof-Icon.png" width="68" height="68"/&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rdRhS" rel="nofollow">jsfiddle.net/rdRhS</a></p>