2015-06-22 76 views
0

primefaces工具提示显示页面的底部..当我鼠标ohover上的工具提示消息显示页面的底部。 primefaces工具提示显示页面的底部..当我鼠标哦工具提示消息显示页面的底部。 这里是我的代码和图片链接.. http://postimg.org/image/k9maot5gl/显示页面底部的Primefaces工具提示?

  <!DOCTYPE html> 
      <h:html xmlns="http://www.w3.org/1999/xhtml" 
       xmlns:ui="http://java.sun.com/jsf/facelets" 
       xmlns:h="http://java.sun.com/jsf/html" 
       xmlns:f="http://java.sun.com/jsf/core" 
       xmlns:p="http://primefaces.org/ui"> 
      <h:head> 
      <meta charset="utf-8"></meta> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta> 
      <meta name="viewport" content="width=device-width, initial-scale=1">  </meta> 
      <title>about</title> 

      <!-- Bootstrap --> 

      <link href="css/bootstrap.min.css" rel="stylesheet"></link> 
      <link href="css/bootstrap-slider.css" rel="stylesheet"></link> 
      <link href="fonts/stylesheet.css" rel="stylesheet"></link> 
      <link href="css/style.css" rel="stylesheet"></link> 
      <!--[if lt IE 9]> 
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
      <![endif]--> 
      </h:head>   <h:body styleclass="bgcolor"> 
     <header> 
      <div class="subheader"> 
       <div class="container subblckbg "> 
        <div class="logo maplogo homelogo"> 
         <h:outputLink value="home.xhtml"> 
          <p:graphicImage value="images/logo.png" alt="" width="278"></p:graphicImage> 
         </h:outputLink> 
        </div> 
        <div class="userloginbtn"> 
         <a href="#" data-toggle="dropdown"> 
          <p:graphicImage value="images/user_icon.png" alt="" title="" width="24"></p:graphicImage> 
         </a> 

         <h:panelGroup rendered="#{empty sessionBean.personDto}"> 
           <ul aria-labelledby="dLabel" role="menu" 
            class="dropdown-menu dpmenu logindpm"> 
            <li> 
             <div class="ldropmenu"> 
              <h3>Login</h3> 
              <form class="lpopup" id="loginForm" name="loginForm" 
               ........ 


              </form> 
             </div> 
            </li> 
           </ul> 
          </h:panelGroup> 
          <h:panelGroup rendered="#{not empty sessionBean.personDto}"> 
           <ul aria-labelledby="dLabel" role="menu" 
            class="dpmenu logindpm dropdown-menu" 
            style="padding: 0 !important;"> 
            <li> 
             <form style="margin-top: 0px;margin-bottom:0px; margin-right: 0px;" 
              id="logoutForm" name="loginForm" 
              action="#{facesContext.externalContext.requestContextPath}/logout/process" 
              method="post"> 
              ........... 
             </form> 
            </li> 
           </ul> 
          </h:panelGroup> 
         </div> 
        <div class="headsocial hmsclimg"> 
          <ul> 
          <li class="callusbox"> 
           <a href="callto:+91-XXXXXXXXXX"> 
           <p:graphicImage styleClass="socialcall" id="contactphonenu" alt=""/> 
           <p:tooltip for="contactphonenu" value="callto:+91-XXXXXXXXXX" style="background-color:#fff; z-index: 100000000 !important;"/> 
            </a> 
           </li> 
          </ul> 
        </div> 
        <nav class="navbar navbar-default navbar-static-top mapnav"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" 
           data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
           aria-controls="navbar"> 
            <span class="sr-only">Toggle navigation</span> 
              <span class="icon-bar"></span> 
              <span class="icon-bar"></span> 
              <span class="icon-bar"></span> 
          </button> 
        </div> 
        <div id="navbar" class="navbar-collapse collapse mapheader"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li ><a href="./home.xhtml">Home</a></li> 
          <li class="active"><a href="./about.xhtml">About <span class="sr-only">(current)</span></a></li> 
          <li><a href="./contact.xhtml">Contact</a></li> 

         </ul> 
        </div> 
        <!--/.nav-collapse --> </nav> 
       </div> 
      </div> 
        <div class="mytabbox maptabbox"> 
          <div class="container subblckbg"> 
           <div class="tab-content clearfix mapsubhed"> 
            <div role="tabpanel" class="tab-pane active" id="Pathology"> 
            <div class="applist"> 
             <h2>About</h2> 
             </div>        
            </div> 
           </div> 
          </div> 
         </div> 
       </header> 
       <section> 
         <div class="about_bg"> 
         <img title="" alt="" src="images/about_bg.jpg"></img> 
         </div> 
       </section> 
       <div class="container app_page brdtop aboutpagelas"> 
        <div class="confmapp "> 
           <div class="app_ldesc conf_about"> 
            <h2> About Us</h2> 
           </div> 
        </div> 
        <div class="row confmappmid"> 
         <div class="col-md-12 about_info"> 
          <div class="abouttitle"> 
           <p>......</p> 
          </div> 
         </div> 

        </div> 
        </div> 

       <footer class="static"> 
        <div class="container"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="hfooter hlfooter"> 
           <ul> 
           <li> <a href="./home.xhtml">Home</a></li> 
            <li><a href="./about.xhtml" class="fnavactive">About</a></li> 
            <li><a href="./contact.xhtml">Contact</a></li> 
            <li><a href="./terms.xhtml">Terms &amp; Conditions</a></li> 
            <li><a href="./privacypolicy.xhtml">Privacy Policy</a></li> 
            <li><a href="./faq.xhtml">Faq</a></li> 
           </ul> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="hfooter"> 
           <p>footer ontent</p> 
           </div> 
          </div> 
          </div> 
        </div> 
       </footer> 




      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
      <script src="js/jquery.min.js"></script> 


      <!-- Include all compiled plugins (below), or include individual files as needed --> 
      <script src="js/bootstrap.min.js"></script> 
      <script src="js/bootstrap-slider.js"></script> 

      <script type="text/javascript"> 
      $("#ex1").slider({}); 
      $("#ex2").slider({}); 
      $(document).ready(function(e) { 
       $(".myacclink").click(function(){ 
        $(".healthclinics").toggle(); 
       }); 
       $(".logindpm").click(function(event){ 
        event.stopPropagation(); 
       }); 
      }); 
      </script> 
     </body> 
     </h:body> 
     </h:html> 
+0

可能与您的实际问题无关,但也可能是相关的:手动添加jquery可能会混淆PrimeFaces(s earch stackoverflow,而不是PF来'责怪')包括bootstrap css可以在PrimeFaces中搞砸(搜索Stackoverflow,而不是PF来'怪') – Kukeltje

回答

0

我认为这可能是约<a>标签。

您可以尝试使用,而不是<a>标签<h:outputLink>标签,就像这样:

<div class="headsocial hmsclimg"> 
    <ul> 
     <li class="callusbox"> 
      <h:outputLink value="callto:+91-XXXXXXXXXX" id="contactphonenu"> 
       <p:graphicImage styleClass="socialcall" alt=""/> 
      </h:outputLink> 
      <p:tooltip for="contactphonenu" value="callto:+91-XXXXXXXXXX" style="background-color:#fff; z-index: 100000000 !important;"/> 
     </li> 
    </ul> 
</div> 

注意ID字段应该是<h:outputLink>标签,而不是在<p:graphicImage>

柳可以看到这里的工作示例: http://www.primefaces.org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml