css overflow issues - css

Question

I'm working on creating tooltips for some content with jQuery and CSS. It works as it should in that the tooltip appears on mouseenter and disappears on mouseleave. My problem lies within my CSS layout. When the tooltip is rendered to the page, it is constricted to the height of its parent:
html:
<div id="allInvTable">
<div class="invItmCont" style="border-bottom:1px solid white;">
<div class="invItmItm">An Item</div>
<div class="invItmStats" style="display:none;">
<div style="clear:both;">
...Some content here...
</div>
<span style="display: none; top: -90px;">
<div style="clear:both;">
...The same content placed here via jquery to display as the tooltip...
</div>
</span>
</div>
</div>
</div>
css:
#allInvTable {
overflow:auto;
}
.invItmCont {
text-decoration:none;
display:block;
float:left;
padding:0 15px;
text-align:center;
position:relative;
clear: both;
}
.invItmCont span {
background-color: #000;
border: 5px solid #826217;
border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
width:200px;
height:auto;
position:absolute;
display:none;
top:-90px;
color:#fff;
left:-37px;
}
Just for reference, the jquery:
<script>
$("#allInvTable div.invItmCont").append("<span></span>");
$("#allInvTable div.invItmCont").hover(function() {
$(this).find("span").animate({opacity:"show", top: "-70"}, "slow");
var itmStat = $(".invItmStats", this).html();
$(this).find("span").html(itmStat);
},
function() {
$(this).find("span").animate({opacity:"hide", top: "-90"}, "fast");
});
</script>
I know that it has to do with the overflow:auto; on #allInvTable because when i remove that attribute, it renders correctly, but the items flow out of their container. How do I fix this?

Answer 1

Um, I know this doesn't answer your question directly, but have you looked at existing tooltip libraries like Twitter's Bootstrap for example: http://twitter.github.com/bootstrap/javascript.html#tooltips
The reason I say this is because, I would rather spend time working on the core of my app rather than try and re-invent the wheel. Unless, you are indeed trying to learn the process of creating the wheel to begin with. Which is also good by the way. You learn a lot that way too.

Answer 2

One of the things you can do is just swap the "tooltip" content into the place you want to display it (that already has the visibility and formatting you want).
This approach treats a display:none element like a content stash.
$("#allInvTable div.invItmCont")
.hover(function() {
var outgoing = $(".invItmItm", this).html();
var incoming = $(".invItmStats", this).html();
$(".invItmItm", this).html(incoming);
$(".invItmStats", this).html(outgoing);
}, function() {
var outgoing = $(".invItmItm", this).html();
var incoming = $(".invItmStats", this).html();
$(".invItmItm", this).html(incoming);
$(".invItmStats", this).html(outgoing);
}
);
See: http://jsfiddle.net/zatz/mgtKD/6/
Alternatively, you can start futzing with z-layers which should be enough of a bad experience that you are ultimately driven to use/adapt one of the existing libraries.