Tooltip for/with Column headers

[Maureen Boyle]

Is there a way to add tooltips/pop-ups to column headers?  I have a cross table that I'd like to include simple 'definitions' of what the values represent, calculations used, etc.  

[barchiel33]

Hello Maureen!

I think you might be able to do it via Javascript. In the dev tools, you can see the element corresponding to the column header. I'd imagine you could use a javascript function to find each header you want to add a tooltip to and attach a tooltip that shows on the mouse over event.

Edited August 8 by barchiel33

[Maureen Boyle]

Thank you for the suggestions!  I was thinking Javascript but was not able to find one (I'm better at modifying vs creating scripts :)!

[Olivier Keugue Tadaa]

What would your javascript look like? Give the idea (what does it do ? )  and we might be able to help

[Jose Leviaguirre]

Hello @Maureen Boyle, This code creates a tooltip that shows up when you hover over certain elements on a webpage. It tracks your mouse movements and updates the tooltip's position and visibility based on where your mouse is and what you are hovering over.

The tooltips variable looks for elements that contains the text and displays the corresponding (html) value. It checks all elements, but triggers only when the element is some sort of "column-header". This is done by checking the class name of the element itself or it's ancestors. You might want to tweak it in case you need to check for "row-header" or both by checking on "-header". You can also change the tooltip styles and the delay time for your tooltip to appear, so it wont show immediately if you mouse is just passing by. 

  (() => {
    let i = 0;
    let tooltipTimeout = null;

    // Tooltips dictionary with lowercase keys
    const tooltips = {
      'city': 'Another big city!',
      'state': 'The inner text or textContent for this item is "state"',
      'population': 'Population in millions<br>Look, we can use images!<br><img style="background:white" src="https://img.icons8.com/ios-filled/100/000000/crowd.png">',
      'country': 'Tooltip for country',
      'latitude': 'Geographical latitude.',
      'longitude': 'Geographical longitude.',
      'average temperature (f)': 'Average temperature data.',
      'air quality index': 'Current air quality index.',
      'observation date': 'Date of observation.',
      'bullet graph':'This bullet graph represnts the air quality index min and max'
    };

    const tooltip = document.createElement('div');
    tooltip.id = 'tooltip';
    tooltip.style.position = 'absolute';
    tooltip.style.backgroundColor = 'black';
    tooltip.style.color = 'white';
    tooltip.style.padding = '5px';
    tooltip.style.borderRadius = '5px'; 
    tooltip.style.fontSize = '12px';
    tooltip.style.visibility = 'hidden'; 
    tooltip.style.opacity = '0';
    tooltip.style.transition = 'opacity 0.2s';
    tooltip.style.pointerEvents = 'none'; // Ensures the tooltip doesn't trigger any events

    document.body.appendChild(tooltip);

    const hasColumnHeaderClass = (element) => {
      while (element) {
        if ([...element.classList].some(cls => cls.includes('column-header'))) {
          return true;
        }
        element = element.parentElement;
      }
      return false;
    };

    // Function to handle mouseover event
    const handleMouseOver = (event) => {
      const target = event.target;
      const textContent = target.textContent.trim().toLowerCase();

      // Clear any existing timeout to avoid overlapping timeouts
      if (tooltipTimeout) {
        clearTimeout(tooltipTimeout);
      }

      tooltipTimeout = setTimeout(() => {
        if (tooltips[textContent] && hasColumnHeaderClass(target)) {
          tooltip.innerHTML = tooltips[textContent];
          tooltip.style.visibility = 'visible';
          tooltip.style.opacity = '1';
          i++;
          console.log(i);
        } else {
          tooltip.style.visibility = 'hidden';
          tooltip.style.opacity = '0';
        }
      }, 800); // 0.8 seconds delay
    };

    // Function to handle mousemove event
    const handleMouseMove = (event) => {
      tooltip.style.left = `${event.pageX + 10}px`;
      tooltip.style.top = `${event.pageY + 10}px`;
    };

    // Function to handle mouseout event
    const handleMouseOut = () => {
      // Clear any existing timeout when mouse leaves
      if (tooltipTimeout) {
        clearTimeout(tooltipTimeout);
      }
      tooltip.style.visibility = 'hidden';
      tooltip.style.opacity = '0';
    };

    // Attach event handlers using 'on' properties
    document.body.onmouseover = handleMouseOver;
    document.body.onmousemove = handleMouseMove;
    document.body.onmouseout = handleMouseOut;
  })();