Board index JavaServer Faces Extensions Tooltip for MenuItems?

Tooltip for MenuItems?

Community Driven Extensions Project

Post 27 Mar 2012, 14:19

Posts: 42
Location: Bariloche, Argentina

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

Post 27 Mar 2012, 14:30
Oleg User avatar
Expert Member

Posts: 3721
Location: Russia, Siberia => Germany, Black Forest
Hi. Sure, it should support events for menuitems. Why not. Have you tried this?
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Post 27 Mar 2012, 15:29

Posts: 42
Location: Bariloche, Argentina

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:

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


and:

<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

Post 27 Mar 2012, 15:35
Oleg User avatar
Expert Member

Posts: 3721
Location: Russia, Siberia => Germany, Black Forest
Simple try this with pe:tooltip. I haven't faced any problems with pe:tooltip so far. We tested it with various components.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Post 27 Mar 2012, 16:27

Posts: 42
Location: Bariloche, Argentina

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

Post 27 Mar 2012, 16:45
Oleg User avatar
Expert Member

Posts: 3721
Location: Russia, Siberia => Germany, Black Forest
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

<p:menuitem id="menu1" url="/faces/configuracion/localidades.xhtml" value="Localidades">
    <pe:tooltip value="ABM ..."/>
</p:menuitem>
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Post 27 Mar 2012, 17:05

Posts: 42
Location: Bariloche, Argentina

Oleg,
Here is the code I copied from firebug:

<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:

<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

Post 28 Mar 2012, 10:27
Oleg User avatar
Expert Member

Posts: 3721
Location: Russia, Siberia => Germany, Black Forest
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:

<pe:tooltip value="Configuración General" forSelector="#menu2 span"/>

This should work.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/

Post 28 Mar 2012, 15:35

Posts: 42
Location: Bariloche, Argentina

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:
#{appBean.toolTips}


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


AppBean:
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


Return to Extensions