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>

Check out PrimeFaces Labs to see Global Tooltip in action!

This entry was posted in PrimeFaces. Bookmark the permalink.

3 thoughts on “Global Tooltips

  1. Hi Gagatay,

    I realized that we can do global tooltips with pure CSS3. No JavaScript or images at all. Here is the idea (section CSS3 tooltips) http://css-tricks.com/css-content/ But we need to read the tooltip’s text from the HTML5 data- attributes and not “title” because browsers would show then the native tooltip too (if “title” is available). So, now it is the question of time when the JSF 2 with HTML5 pass-through attributes is out. When it is out, we can write lightweight and sexy CSS3 global and not global tooltip very easy, without a special Tooltip component. Pure CSS tooltips like in this Demo (View Demo) http://www.red-team-design.com/css3-tooltips are enough in most cases. They work even in old IE. The Tooltip component will stay for advanced features then. Advanced features would be e.g. “mouse tracking” or “complex tooltips’ content”.

  2. If I go to 3.5 Showcase site / Tooltip then in IE I see double tooltips. One coming from JSF and another one normal from browser.
    In Firefox I see only one tooltip