如何在模态窗口上方显示工具提示内容?

时间:2012-03-29 06:26:28

标签: java javascript tooltip overlay wicket

以下是我为显示工具提示内容而编写的代码。由于模态窗口小于工具提示内容,我需要在模态窗口上方显示工具提示内容,而不是在内部生成它。我尝试使用Z-index,但它没有用。任何人都可以帮我解决这个问题吗?

 <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">&nbsp;</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>

1 个答案:

答案 0 :(得分:0)

尝试更改

<div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:2;">

代表

<div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:30001;">

在我的版本(1.5)中,wicket的模态窗口的z-index为20001,你应该用firebug(或wathever)检查你的模态窗口