How to Dynamically Set Tooltip for a Variable in Record Producer / Catalog Item

[PrinceK78263780]

Sample Requirement:
In a Record Producer (or Catalog Item):
If the variable Category is Software, the tooltip for field Subcategory should be "Hello World".
If the variable Category is Hardware, the tooltip for field Subcategory should be "Hello World 2".

[M Iftikhar]

Hi @PrinceK78263780,

You can achieve this by creating an onChange Catalog Client Script on the Category variable and using g_form.showFieldMsg() to display the tooltip/message dynamically. Here are the steps:

1. Open your Catalog Item (or Record Producer).

2. Scroll down to the Catalog Client Scripts related list.

3. Click New.

4. Fill out the form as follows:

   • Name: Set Tooltip (or any relevant name)

   • Applies to: A Catalog Item

   • UI Type: All

   • Type: onChange

   • Variable name: category (the name of the Category variable)

   • Check Active

   • Check Applies on a Catalog Item view

5. In the Script field, add the following:

   function onChange(control, oldValue, newValue, isLoading) {
       if (isLoading) {
           return;
       }
   
       g_form.hideFieldMsg('subcategory',true);
      
       if (newValue == "software") {
           g_form.showFieldMsg('subcategory', "Hello World", "info");
       } else if (newValue == "hardware") {
           g_form.showFieldMsg('subcategory', "Hello World 2", "info");
       }
   }

6. Save the script.

This will ensure that when the Category value changes, the tooltip on the Subcategory field is automatically updated based on the selected value.
Here is the Outcome:

If my response helped, please mark it as the accepted solution so others can benefit as well.

[Vishal_Jaiswal · Accepted solution]

Solution:
Due to UI limitations, this works reliably only in Native UI (UI16).
In Service Portal, tooltips behave differently and may require custom DOM manipulation.

Steps:
Create an onChange Catalog Client Script
Applies to: Record Producer / Catalog Item
Variable name: category
UI Type: All
Isolate Script: Unchecked

Script: You can refer script below for help.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading) return;

    var subcategoryVariableName = 'subcategory';
    var tooltipText = '';

    // Define tooltip text dynamically based on category
    if (newValue === 'Software') {
        tooltipText = 'Hello World';
    } else if (newValue === 'Hardware') {
        tooltipText = 'Hello World 2';
    }

    // --- Service Portal Logic ---
    if (typeof window.angular !== 'undefined') {
        var fieldContainer = g_form.getElement(subcategoryVariableName);
        if (fieldContainer) {
            fieldContainer.title = tooltipText;
        }
    } 
    // --- Native UI (UI16) Logic ---
    else {
        var subcatControl = g_form.getControl(subcategoryVariableName);
        if (subcatControl) {
            var labelElement = document.querySelector("label[for='" + subcatControl.id + "']");
            if (labelElement) {
                var formGroup = labelElement.closest('.form-group');
                if (formGroup) {
                    formGroup.title = tooltipText;
                }
            }
        }
    }
}