当我将鼠标悬停在显示页面底部的工具提示消息上时,primefaces工具提示显示在页面底部。
当我将鼠标悬停在显示页面底部的工具提示消息上时,primefaces工具提示显示在页面底部。
这是我的代码和图像链接。
http://postimg.org/image/k9maot5gl/

            <!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>

最佳答案

我认为可能与<a>标签有关。

您可以尝试使用<h:outputLink>标记而不是<a>标记,如下所示:

<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

09-07 22:13