tooltip is not visible on hover effect on <a>

Question

i am having a problem with the on :hover the tooltip is supposed to visible, but it does not happening .I am using only CSS no js included.Need help. Thank you in advance...:) here is my css :

.tooltip{
        position: relative;
        opacity: 0;
        padding: 10px;
        background: #9B59B6;
        border-radius: 5px;

    -webkit-transition:all 0.2s ease-in;
      -moz-transition:all 0.2s ease-in;
            transition:all 0.2s ease-in;
     }

HTML :

<div class="wrapper">
  <span class="tooltip">Hello ! This is tooltip....</span>
  <a href="#" class="show">Hover Me !</a>
</div>  

Answer 1

You need some code to actually trigger the animation.

In my example below, I have nested the <span> inside the <a> in order to use :hover .

<div class="wrapper">  
  <a href="#" class="show">
     Hover Me !
     <span class="tooltip">Hello ! This is tooltip....</span>
  </a>
</div> 

a:hover span {
    opacity:1;
}

http://jsfiddle.net/6RV5n/

EDIT:

Here's the same concept but using a CSS adjacent sibling selector so as not to nest the elements:

<div class="wrapper">
 <a href="#" class="show">Hover Me !</a>
 <span class="tooltip">Hello ! This is tooltip....</span>
</div>

a.show:hover + span.tooltip {
    opacity:1;
}

http://jsfiddle.net/7pT8Y/3/

Keep in mind that CSS sibling selectors may not work in older version of IE.

Answer 2

If you need to display the tooltip while the user hovering on the div wrapper.. Use the following CSS.

.wrapper:hover > .tooltip{
    opacity: 1;
}

Check this... http://jsfiddle.net/TsQB5/

[EDITED]

.tooltip{
     display:none;
 }

 .show:hover > .tooltip{
     display: block;
 }

This can solve the problem..