Question

What I am trying to do is to have a very simple tooltip that hides/shows on hover using jQuery.

(jsFiddle demo of the problem)

To do this, what I did was to put a div on li’s that will have a tooltip. This div is absolutely positioned on top of each li. The tooltip div will contain varying lengths of text so I cannot just pre-define its width. I just want the width to extend all the way depending on the text length.

My problem is that when I float the li, the div also gets floated (or so it seems) hence taking the width of the floated li. The tooltip now becomes as narrow as the width of the li, which I don’t like to happen.

This is the HTML:

<ul id="images">
    <li><img src="[some image]" /><div class="tooltip">Some text that is quite long.</div></li>
    <li><div class="tooltip">Some text that is quite small.</div><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
</ul>

This is the CSS:

#images li {
    list-style: none;
    margin-left: 10px;
    position: relative;
}

.tooltip {
    color: #FFF;
    clear: both;
    background: #000;
    padding: 10px;
    font: 11px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 5px;
    position: absolute;
    top: -50px;
    display: none;
    border: 2px solid #999;
}

I hope someone would help me with this problem.

Answer 1

You can always calculate the exact width before.

For example, you create a tooltip div outside of your page like

<div class="tooltip" id="calc"></div>

and

#calc{
  top:-100px;
  left:-100px;
}

If you add the following js, it will show nicely

$(".tooltip","#images").each(function(){
  $("#calc").text($(this).text());
  $(this).width($("#calc").width());
});

updated fiddle here