Advanced AutoComplete Tooltip

PrimeFaces AutoComplete is an ajax input suggest component that is far more advanced than other similar JSF components and JS widgets you can find in JS libraries. It supports single, multiple selection, ajax behaviors, custom content, pojo support and more.

An Enterprise User of PrimeFaces required another sponsored feature to autocomplete; Displaying custom content as tooltip on mouseover of suggested items. After giving a though on how to do it, we came up with something like this;

Content of the tooltip is provided by itemtip facet. This is still beta code but cool enough to present.

See PrimeFaces Labs for the live demo!

Hint: Start with “A” :)

15 thoughts on “Advanced AutoComplete Tooltip

  1. Cool. I like Enterprise users :-)

    By the way, the navigation in the suggested items list via keyboard (arrow up / down) doesn’t work properly. I guess, 90% of users select an item via keyboard.

    • Agree. I notice this as well. Probably would be nice to have the arrow (up/down) key work properly. However, this look great now, by the way. Great job, Prime

  2. Found another issue. Just FYI, I know this is a new component and you can fix it fast. Type “Ab” –> Abidal tooltip is shown. Continue some wrong typing, e .g. “Ab123″ –> Tooltip with Abidal stays shown and doesn’t get away. Removing “Ab123″ doesn’t help.

  3. That’s a really cool feature! Thanks.

    I could imagine item tips or something similar to be useful for the SelectOneMenu component as well …

  4. Cagatay/Oleg, this is great! PrimeFaces Community + your blog posts… what a great testing platform. :)

  5. Very good feature request André .. PF Team, do we need to log a Feature Request on SelectOneMenu and around similar components like SelectManyCheckbox?

  6. Cool! Really nice component :)

    I too immediately noticed the keyboard arrow navigation that Oleg mentioned. I think this is indeed a common thing to do.

    One other thing that might possibly be nice is letting the mouse enter the tooltip area, so that one can include links there. Currently the tooltip area disappears when you move your mouse to it.

  7. great work guys.
    I switched to Primefaces because of the options in features I found.

  8. Ah, that looks beautiful. Would it also be possible to use this to display validation messages as popups for input widgets like Calendar ?

  9. How can i add a option “featured” to Item List displaying “Show all Items. I’d like something like the facebook autocomplete style.
    Thks in advance

    Gilson D.