afficher un tooltip au milieu de la page et non sur l'objet lui meme

**GDS_Strou** · 15/09/2015, 13h31

Bonjour,

J'ai actuellement un p:tooltip qui s'affiche sur l'objet que je pointe avec la souris.
Le problème est que si je pointe un objet en bas de ma page, l'info bulle va s'afficher à partir de cet objet en bas et donc va s'afficher en partie en dessous de mon écran.
Y a t-il une possibilité pour que je puisse avoir l'affichage de ce tooltip au milieu ou en haut de mon ecran par default pour tous les tooltip de la page ?
Merci d'avance pour votre aide

**GDS_Strou** · 21/09/2015, 13h45

bonjour,
personne n'a une idée ?

**OButterlin** · 22/09/2015, 10h07

Avec le tooltip de Primefaces, je ne pense pas que tu puisses faire simplement ce que tu veux.
Par contre, rien ne t'empêche de définir une boite de dialogue et y afficher le texte, un peu comme ceci

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
 
<style type="text/css">
#tooltip > .ui-dialog-titlebar{
    display:none;
}
</style>
 
<script>
    function showTooltip(obj)
    {
        $("#tooltipContent").html(obj.title);
        PF('tooltip').show();
    }
    function hideTooltip()
    {
        PF('tooltip').hide();
    }
</script>
 
<div style="margin:20px;text-align:center">
    <br/>
    <p:inputTextarea onmouseover="showTooltip(this)" onmouseout="hideTooltip()" title="Essai de tooltip"></p:inputTextarea>
    <br/>
    <br/>
    <h:graphicImage value="/resources/images/devisVPI.png" onmouseover="showTooltip(this)" onmouseout="hideTooltip()" title="Texte sur image"/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>
 
<p:dialog id="tooltip" widgetVar="tooltip" appendTo="@(body)" closable="false" resizable="false" >
    <div id="tooltipContent"></div>
</p:dialog>

**tchize_** · 22/09/2015, 10h31

avec primefaces extension tu as plus de contrôle sur la position du tooltip

http://www.primefaces.org/showcase-e...itwf0f40h1r36j

**OButterlin** · 22/09/2015, 11h09

Je n'ai pas vu d'option pour centrer... ça existe ?

**tchize_** · 22/09/2015, 20h07

Non, mais y au moins du controle.

**GDS_Strou** · 23/09/2015, 16h35

Merci je vais tester ton code demain.

J'avais bien vue le tooltip des extensions de primefaces mais lorsque je l'utilise, ma page ne se charge pas et je n'ai rien qui s'affiche dans la console

**GDS_Strou** · 24/09/2015, 08h59

Je n'y arrive pas non plus avec le code mis plus haut.
Je m'y prend peut etre mal, à quoi sert $("#tooltipContent").html(obj.title); ?

Je ne comprends pas non plus le contenu de la balise style ?

**OButterlin** · 24/09/2015, 09h12

Code :

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

$("#tooltipContent").html(obj.title);

Là, c'est du jQuery :
"#tooltipContent" est l'id du <div> dans lequel on affiche le texte
"obj.title" permet de récupérer le texte directement du composant html source

Code :

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

<p:inputTextarea onmouseover="showTooltip(this)"...

showTooltip(this) : this représente la balise en cours

La classe de style permet de ne pas afficher l'en-tête de la boite de dialogue.

Si tu peux, montre ton code, on verra ce qui coince

**GDS_Strou** · 25/09/2015, 09h23

En faite j'ai testé directement ton code dans une page vierge avant de faire les modifs dans ma page
Mais même avec ton code je n'y parviens pas.

J'ai bien l'inputTextArea et l'image qui s'affiche lorsque j'affiche la page.

Mais je ne parviens pas à se faire afficher le p:dialog lorsque je pointe ma souris sur cet inputTextArea ou sur l'image.

**OButterlin** · 25/09/2015, 10h30

Peux-tu montrer le code de ta page ?

**GDS_Strou** · 25/09/2015, 13h52

J'ai trouvé mon erreur, j'avais oublié d'ajouter mon ui:define dans la page c'est pour cela que je n'avais rien à l'écran.
Ca fonctionne super bien et c'est très réactif par rapport au tooltip de primefaces.

Par contre j'ai une autre question.

Du coup dans ce tooltipContent je voudrai ajouter sois la page xhtml infosResa.xhtml ou soit la page infoDispo.xhtml suivant que l'objet que je poite est une Réservation ou une DIsponibilité.
Est ce possible d'ajouter ces contraintes ?

Je pense que ça doit se faire dans les fonctions jQuery du coup mais je ne connais pas du tout ce language ?

**OButterlin** · 25/09/2015, 17h33

Si tu veux rajouter une page dans la boite de dialogue, tu peux le faire un peu comme ça :

Code :

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

1
2
3
4
5
6
<p:dialog id="tooltip" widgetVar="tooltip" appendTo="@(body)" closable="false" resizable="false" >
    <div id="tooltipContent"></div>
    <c:if test="...">
       <ui:include ... />
    </c:if>
</p:dialog>

**GDS_Strou** · 28/09/2015, 15h37

J'ai essayé le test de cette façon mais la dialog s'affiche vide :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<p:dialog id="tooltipDialog" widgetVar="tooltip" appendTo="@(body)" closable="false" resizable="false" >
        <div id="tooltipContent"></div>
 
         <c:if test="#{tableauDeBordBean.objetIsUnTerrain()} == true" >
                <ui:include src="/web/programmation/infoBulleInfosTerrain.xhtml" />    
         </c:if>
 
         <c:if test="#{tableauDeBordBean.objetIsUneDispo()} == true" >
                 <ui:include src="/web/programmation/infoBulleInfosDispo.xhtml" />      
         </c:if>                                        
</p:dialog>

**OButterlin** · 06/10/2015, 11h31

<c:if test="#{tableauDeBordBean.objetIsUnTerrain()} ~~== true~~" >
<ui:include src="/web/programmation/infoBulleInfosTerrain.xhtml" />
</c:if>

<c:if test="#{tableauDeBordBean.objetIsUneDispo()} ~~== true~~" >
<ui:include src="/web/programmation/infoBulleInfosDispo.xhtml" />
</c:if>

**GDS_Strou** · 12/10/2015, 16h51

merci OButterlin pour l'aide.

Une dernière question pour que ma page soit fonctionnelle.

La méthode mise dans le <c:if> pour savoir quel page inclure dans le tooltipDialog est construite ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
public boolean objetIsUnTerrain(Object e){
             boolean res = false;
 
             if (e.getClass().getCanonicalName().equals("referentiel.TerrainDto")){
                    res = true;
                    terrainAAfficher = (TerrainDto) e;
             }     
 
             return res;
 }

Le soucis est que dans ma page xhtml, dans le <c:if>, que mettre à la place de ce paramètre Object e ?
Je pensai mettre le paramètre objetSelectionnee qui est le var de ma pe:timeline mais ça me renvoi un nullPointerException.

Ma page xhtml est construite ainsi :

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
 
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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"
       xmlns:pe="http://primefaces.org/ui/extensions"
       xmlns:c="http://java.sun.com/jsp/jstl/core">
 
<ui:composition template="../../WEB-INF/templates/standard.xhtml">
 
       <ui:define name="content">
 
             <script src='http://localhost:8080/persee-client-jsf/resources/javascripts/scripts.js' />
 
             <h:form id="formTableauBord">
 
 
                    <p:fieldset legend="Programmation">
 
                       <pe:timeline id="timeline" value="#{tableauDeBordBean.model}"
                          editable="true" selectable="true" eventMargin="12" eventMarginAxis="0"
                          locale="fr" zoomMin="10000000" zoomMax="606000000"
                          start="#{tableauDeBordBean.start}"
                          end="#{tableauDeBordBean.end}"
                          showNavigation="true" showButtonNew="false" widgetVar="wvTimeline"
                          axisOnTop="true" stackEvents="false" themable="false" groupsOrder="false" var="objetSelectionnee">  
 
                          <p:ajax event="select" update=":infosTerrain"  listener="#{tableauDeBordBean.onSelect}" />
 
<!--                      Zone à survoler dans les event pour afficher la dialog info bulle -->
                          <h:panelGrid columns="1" bgcolor="transparent" width="100%"   class="modelClass_#{objetSelectionnee.id}"
                                               onmouseover="showTooltip(this)" onmouseout="hideTooltip()"  >                  
                          </h:panelGrid>
 
                       </pe:timeline>  
 
 
 
                       <p:dialog id="tooltipDialog" widgetVar="tooltip" appendTo="@(body)" closable="false" resizable="false" style="display:none;">
                          <div id="tooltipContent" ></div>
 
                           <c:if test="#{tableauDeBordBean.afficherTerrain2(objetSelectionnee)}" >
                                 <ui:include src="/web/programmation/infoBulleInfosTerrain.xhtml" />    
                           </c:if>
 
                       </p:dialog>
 
 
                    </p:fieldset>
             </h:form>
 
             <ui:include src="/web/programmation/popupInfosTerrain.xhtml" />
             <ui:include src="/web/programmation/popupInfosDispo.xhtml" />
 
       </ui:define>
</ui:composition>
</html>

**OButterlin** · 13/10/2015, 09h00

<pe:timeline> a un attribut "var" qui représente l'instance en cours dans la boucle de chargement, tu devrais donc mettre

Code :

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

1
2
3
4
<pe:timeline id="timeline" value="#{tableauDeBordBean.model} var="item" ...
...
<c:if test="#{tableauDeBordBean.afficherTerrain2(item)}" >
...

Il faut bien comprendre à quel moment tu dois évaluer l'expression.
Le <c:if> est évalué à la construction de la page, c'est donc l'instance en cours dans la boucle que tu évalues.
Le <p:ajax event="select" ...> lui est évalué à partir du navigateur client quand on sélectionne la ligne, bien trop tard pour toi

**GDS_Strou** · 13/10/2015, 11h00

C'est à priori ce que j'ai fais.

Ligne 45 j'ai :
#{tableauDeBordBean.afficherTerrain2(objetSelectionnee)}.

objetSelectionnee est le var de ma timeline (ligne 29).

Mais au chargement de ma page j'ai NullPointerException car cet objetSelectionnee renvoie null.

Sinon j'ai bien compris l'utilité de l'ajax select event. Je m'en sers pour afficher une dialog sur ma page lorsque je clique sur un event contrairement au test <c:if> qui doit juste afficher un info bulle lorsque je passe la souris sur un event.