Замена стандартных подсказок у полей на форме на tooltip`ы

Хочу показать вам пример, как можно заменить стандартные подсказки у полей на формах, на tooltip`ы - всплывающие подсказки при наведении на поле.

Все подробности в новом ролике, а ниже используемый код

Стили для tooltip и скрытия стандартных подсказок:

Код:

  .tooltip-cust {
    z-index: 100000;
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
  }

  .elma-form-text {
    display: none !important
  }

Код с вкладки скрипты:

Код:

declare const document: any
declare const console: any
let tooltip: any
//функция на инициализации
async function onInit(): Promise<void> {
    ViewContext.data.form_id = `id-${generateUID()}`
    // Создаем элемент подсказки
    tooltip = document.createElement('div');
    tooltip.classList.add('tooltip-cust');
    document.body.appendChild(tooltip);
}

function generateUID(): string {
    return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    })
}
//функция на окончании отрисовки
async function endInit(): Promise<void> {
    const form = document.querySelector(`.${ViewContext.data.form_id}`);
    if (!form) return
    const form_elems = form.querySelectorAll('.elma-form-row')
    if (form_elems) {
        for (let item of form_elems) {
            item.addEventListener('mouseenter', (e: any) => {
                let elem = e.target
                const tooltip_elma = elem.querySelector(':scope > .elma-form-control > .elma-form-text')
                if (tooltip_elma) {
                    tooltip.textContent = tooltip_elma.textContent.trim();
                    tooltip.style.display = 'block';
                    tooltip.style.left = `${e.pageX + 10}px`; // Позиционируем подсказку рядом с курсором
                    tooltip.style.top = `${e.pageY + 10}px`;
                }
            });
            item.addEventListener('mousemove', (e: any) => {
                tooltip.style.left = `${e.pageX + 10}px`;
                tooltip.style.top = `${e.pageY + 10}px`;
            });

            item.addEventListener('mouseleave', () => {
                tooltip.style.display = 'none'; // Скрыть подсказку при уходе мыши
            });
        }
    }
}

Еще больше полезной информации в ТГ канале WhatDaELMA365