Utilizing CSS and Javascript to display tooltips upon mouseover for various inputs has been effective in most cases, however I am encountering an issue with inputs within a Jquery UI Dialog modal. The tooltips appear correctly in front of the dialog when it is initially opened, but upon closing and reopening the dialog without reloading the page, the tooltips appear behind the dialog. Despite setting the z-index of both the tooltip div and the dialog to ensure the tooltip has a higher value, this solution only works upon the first opening. If the dialog is set as non-modal, there are no issues even after reopening (however, modal is preferred in this scenario). Note: Testing was conducted on Firefox 3.6.3
Any insights into why the tooltips only work properly upon the initial opening of the dialog?
A helper div is implemented:
<div style="float: right; margin: 0px 10px 5px 0px;" id="tool_tip_help_id"></div>
In this div, the actual tooltip is appended:
jq('div#tool_tip_help_id').append('<div id="tool_tip_id" class="toolTipDiv" style="display: none;"></div>');
The CSS styling for the tooltip div is as follows:
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;
line-height: 120%;
font-size: 12px;
z-index: 100;
}
An example of relevant dialog declaration is provided below:
jq("#Dialog").dialog( {
bgiframe: true,
autoOpen: false,
width: 595,
modal: true,
draggable: false,
zIndex: 1,
});