当我将鼠标悬停在显示页面底部的工具提示消息上时，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 & 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