pe:tooltip Global Limited

[glennpugh]

Maybe I am misunderstanding the use of the global limited tooltips but I am unable to get them to work.

For example I want to use 2 global tooltips, one which positions above the items and one which positions to the right of the items depending on the layout of the page. So I have the following tooltips:

Code: Select all

<pe:tooltip global="true" myPosition="left center" atPosition="right center" for="@(.ttRight)"/>
<pe:tooltip global="true" myPosition="bottom center" atPosition="top center" for="@(.ttAbove)"/>

I then have, for example, 3 elements within the .xhtml page:

Code: Select all

<p:commandButton id="Btn1" styleClass="ttRight" title="#{msgs.refresh}">
<p:commandButton id="Btn2" styleClass="ttAbove" title="#{msgs.refresh}">
<p:commandButton id="Btn3" title="#{msgs.refresh}">

The problem I have is the global tooltips do not seem to limit which elements they show on based on the 'for' parameter. Even the 3rd button which has no styleClass set at all shows the tooltip.

Now, in the extensions showcase the global limited tooltip shows the input element has a conditional title which is blank until the element is invalid. This does not require the 'for' parameter to be set on the pe:tooltip. The limitation seems to be this conditional title not the 'for' param.

Making a simple change the showcase example demonstrates this:

Code: Select all

<h:panelGrid id="details" columns="2" columnClasses="formColumn1,formColumn2">  
    <p:outputLabel for="firstName" value="First Name: "/>  
    <p:inputText id="firstName" required="true" title="#{component.valid ? '' : 'First Name can not be empty'}"/>  
    <p:outputLabel for="lastName" value="Last Name: "/>  
    <p:inputText id="lastName" required="true" title="#{component.valid ? '' : 'Last Name can not be empty'}"/>  
</h:panelGrid> 
      
<p:commandButton value="Submit" process="details" update="details" title="button" style="margin-top: 10px;"/>  
      
<pe:tooltip global="true" myPosition="left center" atPosition="right center" for="@(.ui-state-error)"/>

Notice the title attribute now on the submit button. Even though this button does not have the .ui-state-error styleClass the tooltip still shows. Unexpected as the pe:tooltip had for="@(.ui-state-error)".

I cannot use a conditional title attribute because I do want a tooltip on all the elements I just want to use a different global tooltip 'style' for different elements.

Thanks in advance.