Global Tooltips

One Tooltip to Rule Them All! Tooltip component has been enhanced greatly in PrimeFaces 3.5. With the new global tooltip feature it is now possible to define one tooltip for all clickable components instead of adding tooltips explicitly using for attribute. Text of the tooltip is retrieved from the target component’s title attribute. Ajax updates are supported as well, meaning if target component is updated with ajax, tooltip can still bind.

<p:tooltip /> <h:form> <h:panelGrid id="grid" columns="2" cellpadding="5"> <h:outputText value="Input: " /> <p:inputText id="focus" title="Tooltip for an input"/> <h:outputText value="Link: " /> <h:outputLink id="fade" value="#" title="Tooltip for a link"> <h:outputText value="Fade Effect" /> </h:outputLink> <h:outputText value="Button: " /> <p:commandButton value="Update" title="Update components" update="@parent"/> </h:panelGrid> </h:form> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <p:tooltip /> <h:form> <h:panelGrid id = "grid" columns = "2" cellpadding = "5" > <h:outputText value = "Input: " /> <p:inputText id = "focus" title = "Tooltip for an input" /> <h:outputText value = "Link: " /> <h:outputLink id = "fade" value = "#" title = "Tooltip for a link" > <h:outputText value = "Fade Effect" /> </h:outputLink> <h:outputText value = "Button: " /> <p:commandButton value = "Update" title = "Update components" update = "@parent" /> </h:panelGrid> </h:form>

Check out PrimeFaces Labs to see Global Tooltip in action!