jquery tooltip not visible completely
I'm trying to create a tooltip with jquery. However I'm having a problem that if there is enough space in the div, then it displays all the tooltip. However I have another div below it, and the tooltip gets hidden behind it. I want to display tooltip over the div, as shown in the image below:
![alt text][1]
Here is my code:

    <div id ="wrapper">
    <button  type="button" class="like_button" onclick=";return false;" id="like" ></button>
    	
    <div class="tooltip">
    			<span class="ilikethis">
    			I like this
    			</span>
    		</div>
    </div>

Here is css code:

    #wrapper{ background:#eaf3fd; margin-top:5px; overflow:visible;}
    .tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
    .ilikethis{
    		display: none;
    		font-size: 1.0em;
    		height:17px;
    		padding:7px;
    		-moz-border-radius: 6px; 
    		-webkit-border-radius: 6px;
    		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    		text-align: center;
    		text-decoration: none;
    		width:60px;
    		background-color:#333333;
    		color:#FFFFFF;
    		text-shadow: #fff 0px 0px 20px;
    		overflow:visible;
    	}


  [1]: http://i.stack.imgur.com/BHRvl.png
jquery tooltip not visible completely
===

I'm trying to create a tooltip with jquery. However I'm having a problem that if there is enough space in the div, then it displays all the tooltip. However I have another div below it, and the tooltip gets hidden behind it. I want to display tooltip over the div, as shown in the image below:
![alt text][1]
Here is my code:

    <div id ="wrapper">
    <button  type="button" class="like_button" onclick=";return false;" id="like" ></button>
    	
    <div class="tooltip">
    			<span class="ilikethis">
    			I like this
    			</span>
    		</div>
    </div>

Here is css code:

    #wrapper{ background:#eaf3fd; margin-top:5px; overflow:visible;}
    .tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
    .ilikethis{
    		display: none;
    		font-size: 1.0em;
    		height:17px;
    		padding:7px;
    		-moz-border-radius: 6px; 
    		-webkit-border-radius: 6px;
    		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    		text-align: center;
    		text-decoration: none;
    		width:60px;
    		background-color:#333333;
    		color:#FFFFFF;
    		text-shadow: #fff 0px 0px 20px;
    		overflow:visible;
    	}


  [1]: http://i.stack.imgur.com/BHRvl.png