Reliably overlay div (tooltip) above modal JQuery UI Dialog?

Question

I'm using CSS/Javascript to show tooltips for various inputs on mouseover. This works in a lot of various conditions but I'm having some trouble with inputs within a modal Jquery UI Dialog. When I open the dialog the first time, it works 100% fine (tooltips show up in front of dialog), but if I close it and re-open it (without reloading the page), the tooltips will show up behind the dialog. I did explicitly set the z-index of tooltip div and dialog so that the tooltip has a higher value, but only works the first time . If I set the dialog non-modal, everything is fine even when re-opening (but I highly prefer modal in this use case) Note: Tested in Firefox 3.6.3

Any ideas on why it works only on first opening of dialog?

I have a helper div:

<div style="float: right; margin: 0px 10px 5px 0px;" id="tool_tip_help_id"></div>

In which I'll append the actual tooltip:

jq('div#tool_tip_help_id').append('<div id="tool_tip_id" class="toolTipDiv" style="display: none;"></div>');

CSS for tooltip div:

div.toolTipDiv{
    background-color:  #FFFF99;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray; 
    position: absolute;
    padding: 2px 2px 2px 2px;
        line-height: 120%;
    font-size: 12px;
    z-index: 100; 
}

Relevant dialog declaration example:

jq("#Dialog").dialog( {
                bgiframe: true,
                autoOpen: false,
                width: 595,
                modal: true,
                draggable: false,
                zIndex: 1,
});