Create a  MultiLine Hover Popup in ADF

When we develop ADF applications we often encounter problems and difficulties on achieving specific behaviour for some functionality or making the user satisfied with the final result. In this blog I will show you my solution for having a multiLine hover pop-up.

Suppose sometimes we need to show a short description or some details about any text on Mouse Hover – in such case we can use inline pop-up. First of all you should use the flexible component af:popup.

For this you have to follow these steps:

• Create a page in your bounded taskflow. Drag an output text in page for which we are going to show short description.
• Drag and drop a popup component in page in which we will show description for output text:

• Now drop a noteWindow under the popup component:

And write your description in source of .jsff page in notw window component. Note that you have to set autoDismissalTimeout property and define the time for which the popup will be shown (in seconds). If we don’t set that, the hover popup will not disappear once activated.

• Drag showPopupBehaviour inside the output text for which you have to show the popup:

• Now pass popupId in showPopupBehaviour and set trigger type to mouseHover:

• Run your page and see how it look when you hover your mouse on the output text:

Improvement in MultiLine Hover Popup

The things that we can improve here are:

1. Not using HTML code and not visualizing the text with spacers, to get the text with real data and not hard coding it in the .jsff file.
2. Other useful thing is to drop ADF components inside noteWindow component and from my point of view the best component you can use to arrange your text in the popup is af:panelGridLayout. This way you can separate the text by adding the needed number of af:gridRow and af:gridCell and placing outputText inside the gridCell as shown in the code below:

Now the behavior is much more flexible and this way you can also visualize real data and not hardcoding it, which depends on your own implementation and the result you want to achieve.

That’s from me on this topic. Feel free to ask questions if you have any trouble. Also you can share additional ideas, improvements and approaches which you tried and found successful.