Child pages
  • Hovercard
Skip to end of metadata
Go to start of metadata


The hook enhances the default user display with additional user profile information in a pop up when hovering above user's avatar.



The hook introduces a key social feature that allows portal users to discover more about other users on a simple hover over their profile image, that appears across the portal, without having to click and visit a users profile page.

The fields that will be displayed on the hovercard are:

  • Common friends
  • Email address (only primary)
  • Friends
  • Phone number (only primary)

The plugin is a customization of the <liferay-ui:user-display> tag, that means the feature will appear on all portlets where this tag is used. Some of the places where this could be found are:

  • Message Boards, Blogs and Wiki comments
  • Recent Bloggers
  • User statistics
  • Requests
  • Asset discussions

In order for the friends and common friends to be populated, the portal should have social networking portlets or custom portlets that allow connections and establishing relationships. In order to jump start, the Liferay Social Networking portlets can be downloaded, installed and made available to the portal users.


  • Obtain the Hovercard app from Liferay Market Place.

  • Deploy the app in your existing out of the box Liferay installation. If you haven't installed Liferay, please download and follow the instructions to do so.

  • When the app is installed all users should see the hovercard, please note that those fields will only appear if the user has those fields updated in their My Account. 

Please check on configuration for personalization and explanation about how to see the fields in hovercards.


  • In order to choose which fields to show please go to

          Control Panel >> Portal Settings >> Users >> Hover Information


           Check and uncheck the fields you want or do not want to display and click on Save at the bottom of the page.

  • Please remember that Users should update their My Account Additional Email address and Phone numbers section in order to have their email address and phone number to appear on hover over their profile picture. The user's login email address is not displayed by this hook but please feel free to modify if that is the desired behavior that you are looking for in your installation.


  • In order to display friends and common friends use applications related to the social interaction to establish the relationship. A simple profile page with some of the social networking portlets such as Wall Portlet and Request Portlet from Liferay's Social Networking application is shown below.



Note for developers

CSS is included on the html page not in a separate stylesheet as this is tag library with a lot of styles coming from user_display.css (which is also part of the taglib css) . Please feel free to override these in your theme as you see it fit.


Code repository

The latest source code is located at the following location:

Contact Us

We welcome feature/bug reports concerning the Hovercard app and other improvements customers may want. Discussion helps clarify the ways the app can be used and also helps define directions for future development. Please post your concerns at


Change log


Company credits.
  • No labels