Below is the code which I wrote to display a tooltip content. As the modal window is smaller than the tool tip content I need to show the tooltip content above the modal window, instead of generating it inside. I tried using Z-index, but it didn’t work as well. Can anyone help me with this issue?
<html>
<head>
<wicket:head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<link rel="stylesheet" type="text/css" href="css/SendTestEmailPanel.css"/>
<script src="/scripts/bt-0.9.5-rc1/jquery.bt.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="/scripts/bgiframe_2.1.1/jquery.bgiframe.min.js" type="text/javascript"></script>
</wicket:head>
</head>
<body>
<wicket:panel xmlns:wicket="http://wicket.apache.org/">
<div id="send-test-email-panel">
<h1>Test</h1>
<div id="tool-tip-div">
<div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:2">
<span class="help" id="email-address-tooltip" title="placeholder_text"> </span>
</div>
</div>
</div>
<div id="email-tooltip-content" style="display:none">
<ul>
<li>To preview what your email fans will see, enter your email address and send a test to yourself.</li>
<li>Links and buttons will be inactive in the test email. </li>
<li>In the live email, the Grab It Now button links to your offer. If your fan is on a desktop computer, they will see the full web version of your offer. If they are viewing the email on their phone, they'll go directly to the mobile version of your offer.</li>
</ul>
</div>
<script type="text/javascript">
var trigger = ['mouseover', 'mouseout'];
var width = '180px';
var pos = 'right';
ShowPopup($('#email-tooltip-content'),
$('#email-address-tooltip'),
trigger,
"$('#email-tooltip-content').html()",
width,
pos
);
</script>
</wicket:panel>
</body>
</html>
try change
for
in my version(1.5) the modal window of wicket have a z-index of 20001, you should inspect with firebug(or wathever) you modal window