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".

[AndersBGS]

Hi @PrinceK78263780 

instead if hanging a dynamic tool tip, you could have a glideajax in a html variable calling sys_ui_message to obtain the message based on variable change in the catalog item.

[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;
                }
            }
        }
    }
}