2012-03-29 7 views
2

Unten ist der Code, den ich geschrieben habe, um einen Tooltip-Inhalt anzuzeigen. Da das modale Fenster kleiner als der Inhalt der Tooltips ist, muss ich den Tooltip-Inhalt über dem modalen Fenster anzeigen, anstatt es innen zu generieren. Ich habe versucht mit Z-Index, aber es hat nicht so gut funktioniert. Kann mir jemand bei diesem Problem helfen?Wie zeige ich den Tooltip-Inhalt über dem modalen Fenster an?

<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> 
+0

mit "" es funktioniert ohne Probleme – pushistic

+0

Vielleicht habe ich dich nicht verstanden .. Und wenn Sie möchten, heben Sie Tooltip können Sie "top: -Npx" oder "margin-top: -Npx" – pushistic

+0

Als im nicht zu post Bilder hier, http://i54.tinypic.com/246w57l. png Das modale Fenster wäre wie das gelbe Rechteck und der Tooltip ist wie das lila Rechteck. – user1266343

Antwort

0

try Änderung

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

für

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

in meiner Version (1.5) das modale Fenster von Wicket einen Z-Index von 20001 haben, sollten Sie mit Firebug überprüfen (oder wathever) Sie modales Fenster

+0

Immer noch hat es nicht für mich funktioniert :(, im mit der Version 1.4.18. – user1266343

Verwandte Themen