Tooltip for MenuItems?

Community Driven Extensions Project
Post Reply
jmrunge
Posts: 42
Joined: 08 Sep 2010, 15:19
Location: Bariloche, Argentina
Contact:

27 Mar 2012, 14:19

Hi,
Does your implementation of tooltip support showing tooltips when user moves his mouse over some menuitem or submenu? Have been searching at forums and at google and could not find it, nor in the showcase or documentation.

Thanks in advance!
PrimeFaces 3.2 - Mojarra 2.1.3 - GlassFish 3.1.1 - NetBeans 7.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Mar 2012, 14:30

Hi. Sure, it should support events for menuitems. Why not. Have you tried this?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jmrunge
Posts: 42
Joined: 08 Sep 2010, 15:19
Location: Bariloche, Argentina
Contact:

27 Mar 2012, 15:29

Hi Oleg,
Thanks for your response. PF tooltip implementation didnt worked on MenuItems, thats why I asked. Or I didnt get how to do it! I'm using MenuBar component with MenuItems. Here is a piece of code of mine:

Code: Select all

<p:menuitem id="menu1" url="/faces/configuracion/localidades.xhtml" value="Localidades" />
and:

Code: Select all

<p:tooltip for='menu1' value='ABM de Localidades' />
Is this correct with PF? Or will this work with PF Extensions?

Thanks in advance!
PrimeFaces 3.2 - Mojarra 2.1.3 - GlassFish 3.1.1 - NetBeans 7.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Mar 2012, 15:35

Simple try this with pe:tooltip. I haven't faced any problems with pe:tooltip so far. We tested it with various components.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jmrunge
Posts: 42
Joined: 08 Sep 2010, 15:19
Location: Bariloche, Argentina
Contact:

27 Mar 2012, 16:27

Oleg,
Didnt worked either, with the code snippets detailed before... Am I using correct syntax?

Regards,
PrimeFaces 3.2 - Mojarra 2.1.3 - GlassFish 3.1.1 - NetBeans 7.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Mar 2012, 16:45

Syntax is correct. "for" in pe:tooltip should match "id" in p:menuitem. This is a search expression for findComponent(). Can you post the client id of your menuitem please? (look in Firebug).

What you can try yet, is this construct

Code: Select all

<p:menuitem id="menu1" url="/faces/configuracion/localidades.xhtml" value="Localidades">
    <pe:tooltip value="ABM ..."/>
</p:menuitem>
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jmrunge
Posts: 42
Joined: 08 Sep 2010, 15:19
Location: Bariloche, Argentina
Contact:

27 Mar 2012, 17:05

Oleg,
Here is the code I copied from firebug:

Code: Select all

<a id="menu2" class="ui-menuitem-link ui-corner-all" href="/milonga-war/faces/configuracion/paises.xhtml">
<span class="ui-menuitem-text">Países</span>
</a>
and:

Code: Select all

<pe:tooltip value="Configuración General" for="menu2"/>
Cannot try the other approach because Im using dynamic menu with MenuModel... Could this be an issue?

Regards,
PrimeFaces 3.2 - Mojarra 2.1.3 - GlassFish 3.1.1 - NetBeans 7.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

28 Mar 2012, 10:27

Cannot try the other approach because Im using dynamic menu with MenuModel... Could this be an issue?
No, this is not an issue. I think the problem is <a href="..." element. Try to attach pe:tooltip to span element with:

Code: Select all

<pe:tooltip value="Configuración General" forSelector="#menu2 span"/>
This should work.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jmrunge
Posts: 42
Joined: 08 Sep 2010, 15:19
Location: Bariloche, Argentina
Contact:

28 Mar 2012, 15:35

Oleg,
Thanks for your time! Finally got it working. What I was doing wrong is the way of inserting the "<pe:tooltip>" tag inside the xhtml page. I was reading a string from my backing bean, which conformed the tag with this atributte and inserting this on the page:

jsf:

Code: Select all

#{appBean.toolTips}
AppBean:

Code: Select all

public String getToolTips() {
    int i = 0;
    String tooltips = "";
    for (SystemOption so : getSystemOptions()) {
        i++:
        tooltips = tooltips + "<pe:tooltip forSelector='#menu" + i + " span' value='" + so.getTooltip() + "' />\n";
    }
    return tooltips;
And changed for:

jsf:

Code: Select all

<c:forEach items="#{appBean.toolTips}" var="tt" >
    <pe:tooltip forSelector="##{tt.key} span" value="#{tt.value}" />
</c:forEach>
AppBean:

Code: Select all

public Map<String, String> getToolTips() {
    if (tooltips == null) {
        tooltips = new HashMap<>();
        int i = 0;
        for (SystemOption so : getSystemOptions()) {
            i++;
            tooltips.put(i, so.getTooltip());
        }
    }
    return tooltips;
}
Thanks again for your time and for pointing me on the right direction!!!

PS: Love PF Extensions, will use it more in my code!
PrimeFaces 3.2 - Mojarra 2.1.3 - GlassFish 3.1.1 - NetBeans 7.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests