Sunday, August 20, 2017

Fluid UI - Responsive and Mobile-Friendly Tooltip

A good friend asked me if we can add a descriptive tooltip to Fluid UI elements. This reminded me that adding tooltips to page field elements has not been very straight forward with PeopleTools. In Classic, we had a few  options (there may be more):

1. Use the field class - HoverText property. This has many limitations - only works for push buttons or hyperlinks, maximum length of 100 characters, to name a few.
2. Use the page field property (use) - Mouse Over Popup settings. This again is limited to push buttons or hyperlinks. It also involves creating Popup page object.
3. Use application delivered Mouse Over Popup Pages. For example, HCM delivers some configuration that can be used for setting up mouse over popup fields.
4. Custom approach:

Needless to say, these options may not be very flexible to use with Fluid.

The good news is that in Fluid, we could use the HtmlAttributes field class property to add/update attributes to the page field element. This allows us to add/update the text attribute which is used to display the tooltip. Let us try this and see how it may work.

Test Environment Details:

Application: CS 9.2 PUM Image 4
PeopleTools Release: 8.55.12
Navigation: Fluid Home > Contributor Relations Homepage > Donor Prospects

Using HtmlAttribute to update the text attribute:

The page activate code for AV_OUTR_SRCH_FL page is written the following App Package Method:
Method: pageActivate

Let us add some custom code to update the text attribute for page field AV_SRCH_FLDS_WK.LAST_NAME_SRCH.

Delivered Tooltip on larger viewport:

Delivered Tooltip on smaller viewport:

With the hoverover text overflowing the smaller viewport, we can see that the tooltip is neither user-friendly nor responsive.

In a quest to find a user-friendly/responsive option, I stumbled on this resource:

The steps provided in Osvaldas's blog are very simple. We just need to load the CSS and javascript provided in the blog and then add the rel="tooltip" attribute to the target page field element. I wanted to take this idea and apply it to PeopleTools (using the above example).

Responsive and Mobile-Friendly Tooltip:

I updated the previous custom peoplecode and added the rel="tooltip" property. Further, I added a javascript object that is improvised on Osvaldas's code.

Custom Tooltip on larger viewport:

Custom Tooltip on smaller viewport:

Implementation Details:

I shared my code - which is based on the blog post by Osvaldo Valutis - on GitHub.


In the sample peoplecode provided above, you can see that along with the text attribute we have also added the rel="tooltip" attribute to the page field element using the HtmlAttributes property.


I modified the CSS provided in Osvaldo's blog to update the tooltip text and background colors. You can make additional modifications if necessary based on your requirement. Create a Free-Form Style Sheet object in App Designer using the CSS (CSK_TOOLTIP_CSS) in the GitHub project.


I extended the javascript provided in Osvaldo's blog to wrap the code in a require block to facilitate the loading of jQuery using requireJS - which I have detailed in the past as part of a javascript injection framework. You could use an alternate approach for the javascript injection but you need to make sure that jQuery is loaded prior to execution of this javascript. Additionally, this javascript also takes care of loading the CSS (CSK_TOOLTIP_CSS) using helper functions - again part of the javascript injection framework. Create a JavaScript (HTML) object in App Designer using the javascript (CSK_TOOLTIP_JS) in the GitHub project.


  1. Hi Sasank!

    This is great! Javascript to the max again. especially how relatively easy the implementation is on the people code side. Well done. Thanks for sharing.

    Your idea gives me more inspiration of creating a setup page were you tie RECORD.FIELD together with a DESCR. In your code you can than loop over your page fields and attach the title dynamically which is obtained from your DESCR. You might even use MESSAGECAT for this.


    1. @Stefan - Thanks!

      That sounds like a great idea. Further, we could eliminate the custom code by using Event Mapping Framework for the page activate peoplecode!

  2. HI, I followed all steps meticuously. yet my Custom tooltip is not visible.
    Did I missed anything ?

  3. Needless to Mention its a one off achievement.

    1. It is hard to say what steps you are missing.

      - First, check if you are seeing the html attributes on the browser using the developer tools option.
      - Then check if you custom javascript is firing by adding some console.log('Enter Debug Message Here'); messages.
      - Also, check your browser console for any javscript errors.


  4. Many Thanks Sasank,

    I am getting Javascript error: 'require' is undefined.

    1. Hi Sasank,

      I was able to solve this error. The code above is not referring to jQuery Source.
      I modified the code like this

      window.onload = function () {

      require([''], function (JetCSKJQ) {

      var $ = JetCSKJQ;

      $( function()......

    2. Yes. That is the problem.

      The details on how I use requireJS is in this link(which I also mentioned in this blog post):

  5. Does this Tooltip not support Checkboxes in Fluid UI ?

    1. I have not tried it on a Checkbox in Fluid but I would imagine it would work as long as the rel attribute is added.

    2. its not working for checkbox. Have you tried it yet on checkbox field?