Position Tooltip décalée

**LexMan32** · 09/11/2016, 08h10

Bonjour,

J'utilise PrimeFaces 5.3. J'ai un menu composé d'image sur lequel j'avais mis le nom de la page en tooltip.

J'ai modifier tous le design de mon site en utilisant plusieurs div en position relative et absolue pour certaine.

Depuis ce moment, tous mes tooltip apparaissent correctement mais au fond de la page. (Idem pour les tooltip de PrimeFaces Extension)
J'ai aussi remarquer que j'avais un bouton qui fessait apparaitre un menu d’administration et celui-ci ce voit aussi décalé au fond de mon site.
J'ai aussi pus remarquer que les dialogue (par exemple de suppression) n'apparaisse plus du tout.

Si quelqu'un as une idée de la provenance de ce problème et saurais comment le résoudre, c'est bien volontiers.

**OButterlin** · 09/11/2016, 12h40

Peux-tu montrer le code de ton menu et mettre en évidence ce que tu as ajouté qui entraîne le dysfonctionnement ?

**LexMan32** · 09/11/2016, 13h11

Voila le code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<ui:composition template="template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui">
    <ui:define name="templateContenu">
 
		<h:head>
		 	<h:outputStylesheet library="css" name="stylesIntranet.css"/>
 
		 	<link rel="shortcut icon" type="image/png" href="${request.contextPath}/resources/images/favicon.ico"/>
		 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
			<h:outputScript library="scripts" name="jquery.nivo.slider.pack.js"/>
			<script type="text/javascript"> 
				$(window).on('load', function() {
				    $('#slider').nivoSlider({
				    	effect:'fade',
				    	pauseTime: 7000,
				    	animSpeed: 1000,
				    	controlNav: false, 
				    	directionNav:false,
				    	controlNavThumbs: false,
				    	pauseOnHover: false,  
				    }); 
				}); 
			</script>
		</h:head>
 
		<h:body style="background-color: #dce2ed;">
			<div class="bodyIntranet">
 
				<!-- DIV En-tête / Menu -->		    
				<div>
					<h:form id="menuIntranetForm">
 
					    <div align="right" class="toolbarIntranet">
					    	<p:inputText style="width:175px;" value="#{menuIntranetForm.valueRecherche}"/>
							<p:commandButton value="#{msg['Rechercher']}" action="#{menuIntranetForm.goToSearch}"/>
 
							<p:commandButton id="adminMenuBt" value="#{msg['Administration']}" type="button" rendered="#{menuIntranetForm.adminIntranet}" style="margin-left:10px;"/>
							<p:menu overlay="true" trigger="adminMenuBt" my="left top" at="left bottom">
					            <p:menuitem value="#{msg['GestionDesPages']}" outcome="/secured/adminIntranet/intranet/menuPage/gestionMenuPage.xhtml"/>
						   		<p:menuitem value="#{msg['GestionDesNews']}" outcome="/secured/adminIntranet/intranet/accueil/gestionNews.xhtml"/>
						    </p:menu>
 
							<p:button outcome="/secured/user/divers/accueil.xhtml" value="#{msg['AccesAErp']}" style="margin-left:10px;"/>						    
					    </div>
 
						<div id="slider" class="nivoSlider">
							<h:graphicImage value="/resources/images/intranet/bandeau/bandeau_amenagement.jpg" />
							<h:graphicImage value="/resources/images/intranet/bandeau/bandeau_eau.jpg" />
							<h:graphicImage value="/resources/images/intranet/bandeau/bandeau_energie.jpg" />
							<h:graphicImage value="/resources/images/intranet/bandeau/bandeau_environnement.jpg" />
							<h:graphicImage value="/resources/images/intranet/bandeau/bandeau_geniecivil.jpg" />
						</div>
 
						<div class="headerMenu">
							<div class="logoIntranet">
								<h:link outcome="/secured/user/intranet/accueil/accueil.xhtml">
									<h:graphicImage value="/resources/images/intranet/RWBLogo.png"/>
								</h:link>
							</div>
							<div class="raccourcisRWB">
								<h:link outcome="/secured/user/intranet/photoColl/photoColl.xhtml">
									<h:graphicImage id="iconePhotoColl" value="/resources/images/intranet/outils/camera.png" styleClass="iconeOutils"/>
									<p:tooltip for="iconePhotoColl" value="#{msg['PhotoDesCollaborateurs']}" trackMouse="true"/>
								</h:link>
							</div>
							<div class="menuIntranet">
								<h:link id="lienAccueil" outcome="/secured/user/intranet/accueil/accueil.xhtml">
									<h:graphicImage value="/resources/images/intranet/menu/accueilIcone.png"/>
									<p:tooltip for="lienAccueil" value="#{msg['Accueil']}" trackMouse="true"/>
								</h:link>
 
								<ui:repeat var="menuIntranet" value="#{menuIntranetForm.listMenuPageEnTete}">
									<h:link id="menuLien" outcome="/secured/user/intranet/menuPage/afficherMenuPage.xhtml">
										<o:graphicImage value="#{menuIntranet.icone}" dataURI="true"/>
										<p:tooltip for="menuLien" value="#{menuIntranet.libelle}" trackMouse="true"/>
									    <f:param name="MenuPageId" value="#{menuIntranet.id}"/>
									</h:link>
								</ui:repeat>
							</div>
						</div>
 
					</h:form>
				</div>
 
				<!-- DIV Contenu -->
				<div>								
					<p:outputPanel id="contenu" styleClass="contenuIntranet">
						<ui:insert name="contenu"/>
					</p:outputPanel>
				</div>
 
				<!-- Div Pied de page -->
				<div class="footerIntranet">
					<table style="width:100%; font-family: Arial; font-size: 0.8em;">
						<tr>
							<td style="text-align:left">
								<h:graphicImage value="/resources/images/intranet/picto/picto_amenagement_territoire.png" width="40" height="40"/>
								<h:graphicImage value="/resources/images/intranet/picto/picto_eau.png" width="40" height="40"/>
								<h:graphicImage value="/resources/images/intranet/picto/picto_energie.png" width="40" height="40"/>
								<h:graphicImage value="/resources/images/intranet/picto/picto_environnement.png" width="40" height="40"/>
								<h:graphicImage value="/resources/images/intranet/picto/picto_genie_civil.png" width="40" height="40"/>
							</td>
							<td style="text-align:center"><h:outputText value="#{msg['Copyright']}"/></td>
							<td style="text-align:right"><h:outputText style="font-weight:Bold; font-style: Italic;" value="#{msg['ConnecteEnTantQue']} : #{sessionScope.user.login}"/></td>
						</tr>
					</table>
				</div>
			</div>
		</h:body>
	</ui:define>
</ui:composition>

Et le code css qui le concerne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.bodyIntranet {
	width: 1000px; 
	margin-left: auto; 
	margin-right: auto;
}
 
.toolbarIntranet {
	height: 35px; 
	position: relative;
}
 
#slider {
    position:relative;
    height:250px;
    width: 1000px;
    overflow: hidden;
}
 
#slider img {
    position:absolute;
    display:none;
	top: 0px;
	left: 0px;
}
 
.headerMenu {
	position: relative;
	top: -250px;
}
 
.logoIntranet {
	position: absolute;
	top: -20px;
	left: 20px;
}
 
.raccourcisRWB {
	position: absolute;
	width: 100px;
	height: 50px;
	top: 30px;
	left: 700px;
	padding: 5px;
	border-color: white;
	border-style: solid;
	border-width: 3px;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.25) 100%);
}
.iconeOutils {
	width: 50px;
	height: 50px;
}
 
.menuIntranet {
	position: absolute;
	top: 205px;
}
.menuIntranet img {
	width: 70px;
	height: 70px;
	margin: 10px;
	border-color: white;
	border-width: 3px;
	border-style: solid;
	border-radius: 40px;
}
.menuIntranet img:hover {
	width: 80px;
	height: 80px;
	margin: 5px;
	border-color: white;
	border-width: 3px;
	border-style: solid;
	border-radius: 45px;
}
 
.contenuIntranet {
	padding: 55px 10px 10px 10px;
	background-color: white;
	min-height: 650px;
	overflow: auto;
}
 
.footerIntranet {
	height: 40px;
	margin-top: 5px;
}

Je pense que le problème pourrais provenir du fait que les tooltip ne se trouve pas dans la div générale qui se trouve en position relative.

Mais comment forcer ceux-ci soit a changer de position ou alors les faire entrer dans la div principale.

**OButterlin** · 09/11/2016, 15h06

Tu peux mettre une image écran du résulat stp ?

Pourquoi y-a-t-il autant de <div> ? Mixer des éléments html avec des composants jsf est plutôt à éviter...

**LexMan32** · 10/11/2016, 09h01

Désolé du temps de réponse j'étais partis sur la MAJ d'éclipse.

J'avais utiliser les div dans le but de séparer les éléments du site. Je les ai utilisé car je ne connais pas encore toutes les éléments jsf (c'est mon premier projets dans ce langage). Donc si tu as une autre façon de faire je suis preneur

Voci une capture du résultat. on peut voir les tooltip en bas a gauche

Nom : Capture.PNG
Affichages : 444
Taille : 578,1 Ko

**OButterlin** · 10/11/2016, 09h31

L'équivalent de <div> est <h:panelGroup layout="block">

Un autre truc qu'il vaut mieux éviter est le mélange de tag de bibliothèques différentes, généralement, ça fout le désordre...
Dans ton cas, tu panaches <h:link> avec <p:tooltip>.
Je te recommande d'utiliser <p:commandeLink> avec <p:tooltip> et là, je pense qu'ils s'afficheront correctement.

Position Tooltip décalée

JSF Java

Vue hybride

Discussions similaires

Partager

Partager