Primefaces : info bulle qui persiste

**denisduval75** · 04/02/2018, 14h24

Bonjour,

Dans un datatable du framework Primefaces, j'utilise le composant pe:tooltip sur la 1ère colonne du tableau dont le libellé est cliquable et me permet d'ouvrir une fenêtre d'informations.

Le tooltip du libellé reste alors affiché comme ceci (exemple après avoir cliqué sur chacun des 3 liens) :

Nom : Sans titre.png
Affichages : 212
Taille : 5,7 Ko

Nom : Sans titre.png
Affichages : 212
Taille : 5,7 Ko

Le code correspondant :

Code :

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

1
2
3
4
5
6
7
8
<p:commandLink id="idDetailLigneTotalGeneral"
     action="#{contributeurManagerBean.afficherDetailLigneTotalGeneral(contributeur.type)}"
     oncomplete="PF('widgetDetailLigne').show()"
     update="form">
     <h:outputText value="#{contributeur.libelle}" style="margin-left:28px"/>
</p:commandLink>
<pe:tooltip for="idDetailLigneTotalGeneral" value="Détail de la ligne" myPosition="center left" atPosition="center right" adjustX="5"/>

Merci pour votre aide.

**headmax** · 05/02/2018, 12h00

Idem que l'autre POST il faut le HTML et pas ton XHTML (balise XML + ATTRIBUTS métiers) qui n'ai que la logique que JAVA a besoin pour générer en vrai HTML.
Il faut le HTML du tooltip ainsi que les références des styles ou class appliqués a cet élément HTML.

**denisduval75** · 16/02/2018, 08h05

Bonjour,
Voici les infos.
MERCI.

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
Mon code :
                            <p:commandLink rendered="#{contributeur.type == 'L1' or contributeur.type == 'L2' or contributeur.type == 'L3'}"
                                           action="#{contributeurManagerBean.afficherDetailLigne(contributeur)}"
                                           oncomplete="PF('widgetDetailLigne').show()"
                                           update="form">
                                <h:outputText id="idContributeurLigneDetail" value="#{contributeur.libelle}" style="margin-left:25px"/>
                                <pe:tooltip for="idContributeurLigneDetail" value="Détail de la ligne"/>
                            </p:commandLink>

Code généré :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.ui-widget-content {
	border: 1px solid #D5D5D5;
	background: #ffffff;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
a, label, ui-widget-content inputText, tr.ui-widget-content, tr.ui-widget-content a {
	color: #595959;
}
.ui-datatable tbody.ui-datatable-data {
	outline: 0;
}
.ui-datatable table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
.ui-datatable-scrollable table, .ui-datatable-sticky table {
	table-layout: fixed;
}
.ui-datatable-resizable table {
	table-layout: fixed;
}
.ui-datatable-scrollable-body {
	overflow: auto;
}
.ui-datatable .ui-datatable-scrollable-body {
	min-height: 0px;
}
.ui-datatable-frozen-container .ui-datatable-scrollable-body {
	overflow: hidden;
}
.ui-datatable .ui-datatable-frozen-container {
	margin-right: -1px;
}
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
	padding: 4px 10px;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
}
.ui-datatable tbody td {
	border-color: inherit;
}
.ui-datatable-resizable thead th, .ui-datatable-resizable tbody td, .ui-datatable-resizable tfoot td {
	white-space: nowrap;
}
.ui-datatable .ui-datatable-frozenlayout-left, .ui-datatable .ui-datatable-frozenlayout-right {
	padding: 0;
	border: 0 none;
	vertical-align: top;
}
.ui-datatable table.ui-datatable-fs {
	width: auto;
}
a {
	text-decoration: none;
	outline: none;
	cursor: pointer;
}
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1.1em;
}
.ui-datatable-resizable {
	padding-bottom: 1px;
	overflow: auto;
}
.backgroundGrisMoyen {
	background-color: #e2e2e2;
}
form {
	font-family: Calibri;
	font-size: 10px;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
</style>
</head>
<body>
<form name="form" id="form" action="/WebJOD/pageTableauContributeur.xhtml" enctype="application/x-www-form-urlencoded" method="post">
<div align="center">
<div class="ui-datatable ui-widget ui-datatable-scrollable backgroundGrisMoyen ui-datatable-resizable ui-datatable-frozencolumn" id="form:idRefContributeur" style="border-radius: 5px;"><table class="ui-datatable-fs"><tbody><tr><td class="ui-datatable-frozenlayout-left"><div class="ui-datatable-frozen-container"><div tabindex="-1" class="ui-datatable-scrollable-body"><table role="grid">
<tbody tabindex="0" class="ui-datatable-data ui-widget-content" id="form:idRefContributeur_frozenTbody">
<tr class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false" data-rk="426" data-ri="1">
<td role="gridcell" style="width: 224px;">
<a class="ui-commandlink ui-widget" id="form:idRefContributeur:1:j_idt32" onclick="PrimeFaces.ab({s:&quot;form:idRefContributeur:1:j_idt32&quot;,u:&quot;form&quot;,onco:function(xhr,status,args){PF('widgetDetailLigne').show();}});return false;" href="#"><span id="form:idRefContributeur:1:idContributeurLigneDetail" aria-describedby="qtip-form:idRefContributeur:1:j_idt33" style="margin-left: 25px;" data-hasqtip="form:idRefContributeur:1:j_idt33">Fonctionnement (7473)</span></a></td></tr></tbody></table></div></div></td></tr></tbody></table></div></div></form></body>
</html>

**Cincinnatus** · 16/02/2018, 09h21

Bonjour,

tooltip est désormais un composant de Primefaces , <p:tooltip>, et n'a plus besoin d'être défini comme extension de Primefaces, <pe:tooltip>.
Est-ce un problème de version de composants ?

**denisduval75** · 16/02/2018, 11h27

J'utilise la dernière version de PrimeFaces : 6.1
Je suppose que tout est à jour.

Primefaces : info bulle qui persiste

Conception Web

Vue hybride

Discussions similaires

Partager

Partager