New Tooltip

Tooltip component was far away from the PrimeFaces standards, it had serious positioning issues(see here) and had problems with ajax updates. It was based on qtip jquery plugin so in order to fix these issues to provide a production ready component, I’ve followed our new approach that is working quite fine which is writing a native PrimeFaces widget instead of using a third part work to have full control. So for 3.0.M3 I’ve rewritten the tooltip by following the “think simple” idea.

Notable features are;

  • Theme aware
  • Effects (e.g fade, slide, clip, explode …)
  • Trigger events (e.g. mouseover, mouseout, focus, blue)
  • Custom content support
  • Fallback to get tooltip value from target’s title to keep functionality if javascript is disabled
  • Fixed positioning issues, tested within various components like layout, dialog, tabs and more.
  • Better cross browser support as tooltip is appended to the document body to avoid z-index issues.
  • Tooltips can be updated with ajax, it is suggested to update the tooltip target as well to get best results.

Features left out in current reimpl are global tooltips and custom positioning(topleft). In future released we might add features like mouse tracking, custom positioning and content fetching with ajax to reduce page size but I think new tooltip will satisfy most of the requirements.

See Labs Showcase to see new tooltip in action.


6 Responses to New Tooltip

  1. Anonymous says:

    Nice feature

  2. Daniel says:

    Looks great and simple!

  3. jp_2011 says:

    Very nice, something I have been looking for in PrimeFaces. Thanks for all your great work!

  4. Anonymous says:

    really niiice 🙂 will try M3 on monday

  5. Clément says:

    Seems really nice.
    Thanks a lot!

  6. OneCent says:

    Nice, but i’m missing “one more thing” 😉 If the Window is too small, you can not read the tooltip because its on the “right” side.

%d bloggers like this: