Add hover text for related list tab

Prabhh
Kilo Guru

Hello Team,

Can anyone please suggest if there is any way to add hover text/hint text for Related list tab?

For example, we need to show some help text when user keeps a cursor on "Resource Plan" tab.

find_real_file.png

Thank you,

Prabhjot Kaur

6 REPLIES 6

Raju Koyagura
Tera Guru

I don't think there is an OOB option to configure however there is a possibility that you can manipulate it using DOM elements which is not a good practice. 

Prabhh
Kilo Guru

Thank you for the response Raju.

I know there is no OOB option to configure hover text for related tabs, so I was looking for any workaround to do the same.

subrahmanyam
Giga Contributor

@Prabhh ,

This is not possible OOB as mentioned by Raju.
But there is a way to add tooltip or help text, if we go for custom solution.

-------------
First you need to find the related list tab name for the tab on which you want to add the tooltip. Please follow below steps to identify tab name.
1. Go to "System UI" application menu in left navigation menu, and then navigate and click on "Related Lists" module.
2. Search with the "table name" and proper "view"(in your case it may be default view) to find the related list configuration that is appearing on the form.
3. Open the record, and sort the embedded list using the position column.
4. Identify the entry for "Resource Plan" related list and note down name present in the "Related List" field (Lets call this name as "suffix").
5. To find the tab name you need to append "table name"(without quotes) followed by a "."(without quotes) followed by "suffix" you found in above step.
For example, "Approvers" related list tab in change request table is given "change_request.sysapproval_approver.sysapproval" name.

6. After identifying the name if you want to add the help text, write a onload client script on the form with similar lines of code as mentioned below.
g_tabs2List.tabsTabs[g_tabs2List.findTabIndexByName("change_request.sysapproval_approver.sysapproval")].element.setAttribute("data-toggle", "tooltip");
g_tabs2List.tabsTabs[g_tabs2List.findTabIndexByName("change_request.sysapproval_approver.sysapproval")].element.setAttribute("title", "HELP TEXT");

In the above example script, replace change_request.sysapproval_approver.sysapproval with the name of the related list on your form.
And replace "HELP TEXT" with the help text that you want your users to see when they hover over the tab.
-------------

Servicenow uses bootstrap while rendering forms on browser.
By following above steps you are utilizing bootstraps JS tooltip to achieve the behavior you intend to implement.
https://www.w3schools.com/bootstrap4/bootstrap_ref_js_tooltip.asp

As we are utilizing the technology used by servicenow, the tool tips implemented this way on the form, will be consistent with the tooltips given OOB for normal form fields.

g_tabs2List is a reference to client side library like g_form, but it is not documented anywhere by servicenow (as far as I know).
Hence during every upgrade you may need to validate and check to see if this functionality is working as intended.
As long as servicenow does not plan to revamp this hidden client side library API, you should be good.

 

Thanks and regards,
Subrahmanyam Satti

@subrahmanyam,

This is really helpful. Thanks for your contribution.

My scenario is to Highlight color to related list. Since we don't have direct option to apply color to related list, the way we have is by using DOM elements.

As using DOM in client scripts is not a recommended way, we can use g_tabs2List to find related list element and apply styling.
Following is the code I used and works perfect:

g_tabs2List.tabsTabs[g_tabs2List.findTabIndexByName("incident.REL:ef5e0c75dbed605085e74cd2399619e7")].element.style.backgroundColor = 'blue';

 

Other Helpful Article:
https://community.servicenow.com/community?id=community_blog&sys_id=01ccee25dbd0dbc01dcaf3231f9619dc