How to add a tooltip to an E164 phone number field in ServiceNow?

[colin-lucwe]

Hi everyone,

I’m trying to add a tooltip to an E164 phone number field in ServiceNow. The field automatically renders two inputs:

• Top line: country selection

• Bottom line: phone number 

I’ve tried setting a tooltip via the dictionary hint and with a simple g_form.getElement('field_name').title, but nothing appears on the visible inputs.

I’m looking for a clean and reliable way to show a tooltip for this field that covers both the country and the number inputs.

Has anyone successfully added tooltips to E164 fields? Any guidance or examples would be greatly appreciated.

Thanks in advance!

[Vishal_Jaiswal]

Hi @colin-lucwe ,

To make the tooltip appear on the elements the user actually interacts with, you need a specialized onLoad Client Script using DOM manipulation.
UI Type: Desktop (This solution is for the Native/Classic UI).

Isolate Script: You must uncheck the "Isolate script" checkbox on the Client Script form.
The Solution: onLoad Client Script
Script:

function onLoad() {
    var fieldName = 'u_phone_number'; // Replace with your E164 field backend name
    var tooltipText = "Please select your country code and enter your phone number.";

    try {
        // 1. Get the control. For E164, this usually grabs the hidden input field.
        var control = g_form.getControl(fieldName);

        if (!control) {
            return;
        }

        // 2. Traverse to the parent container. 
        // The visible inputs are siblings of the hidden control within a specific wrapper.
        var container = control.parentNode;

        if (container) {
            // 3. Find the interactive elements.
            // We look for 'input' (the number field) and 'button' (often used for the country dropdown)
            // We exclude 'hidden' inputs so we don't double-tag the value holder.
            var interactiveElements = container.querySelectorAll('input:not([type="hidden"]), button, select');

            // 4. Loop through them and apply the title attribute
            for (var i = 0; i < interactiveElements.length; i++) {
                interactiveElements[i].setAttribute('title', tooltipText);
            }
        }
    } catch (e) {
        alert('Error setting E164 tooltip: ' + e.message);
    }
}

Regards,

Vishal