Question

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:

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

Answer 1

Have you tried adding a z-index to the tip? Does the div that is hiding the the tip have a z-index?

If you could provide more markup or even better try to isolate and recreate the issue at jsfiddle.net it would be easier for us to diagnose