apphouse/dist/utils/dom/xRayTooltips.ts

Component library for React that uses observable state management and theme-able components.

/**
 * Adds tooltips to elements with the 'data-xray' attribute.
 *
 * @returns {void}
 */
export function addXrayTooltips(): void {
  const xrayElements = document.querySelectorAll('[data-xray]');

  xrayElements.forEach((element) => {
    const xrayValue = element.getAttribute('data-xray');
    const tooltip = document.createElement('span');
    const variant = element.getAttribute('data-variant');
    if (tooltip && xrayValue) {
      tooltip.innerText = xrayValue + (variant ? `(${variant})` : '');
      tooltip.style.position = 'absolute';
      tooltip.style.backgroundColor = 'black';
      tooltip.style.color = 'white';
      tooltip.style.padding = '5px';
      tooltip.style.borderRadius = '5px';
      tooltip.classList.add('xray-tooltip');

      element.addEventListener('mouseover', () => {
        element.appendChild(tooltip);
      });

      element.addEventListener('mouseout', () => {
        tooltip.remove();
      });
    }
  });
}

/**
 * Removes all tooltips with the 'xray-tooltip' class.
 */
export function removeXrayTooltips(): void {
  const tooltips = document.querySelectorAll('.xray-tooltip');

  tooltips.forEach((tooltip) => {
    tooltip.remove();
  });
}