Top

New Tooltip

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.

Share
6 Comments
  • Anonymous
    15 July 2011 at 07:46

    Nice feature

  • Daniel
    15 July 2011 at 13:21

    Looks great and simple!
    thx!

  • jp_2011
    15 July 2011 at 13:52

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

  • Anonymous
    15 July 2011 at 20:57

    really niiice 🙂 will try M3 on monday

  • Clément
    16 July 2011 at 07:10

    Seems really nice.
    Thanks a lot!

  • OneCent
    18 July 2011 at 07:44

    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.

Post a Comment