JavaScript Column Headers Tooltips for Spotfire

Overview

This code creates a tooltip that appears when you hover over certain elements on a webpage. A tooltip is a small box that shows additional information about something when you move your mouse over it. In this case, the mouse detects column-headers and shows the corresponding tooltip defined. 

The code creates a tooltip that shows up when you hover over certain elements. 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'))) {                   //only for column headers
//        if ([...element.classList].some(cls => cls.includes('row-header')) {                     //just for row headers 
//        if ([...element.classList].some(cls => cls.includes('column-header') || 'row-header')) { //column headers and row headers
          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;
  })();

What the Code Does

1. Creates the Tooltip Box:

   • It makes a small, invisible box (the tooltip) that will show up when you hover over certain elements. This box is styled to have a black background, white text, and some padding so that it looks nice.

2. Defines What the Tooltip Will Show:

   • It has a set of predefined messages that will be shown in the tooltip depending on what you are hovering over. For example, if you hover over an element with the text "city", the tooltip will show a message about a city.

3. Sets Up How to Show the Tooltip:

   • When you move your mouse over an element: The code checks if the element you're hovering over has specific text and a certain class. If it does, the tooltip will appear with the corresponding message.
   • When you move your mouse around: The tooltip will follow your mouse to stay close to it.
   • When you move your mouse away: The tooltip will disappear.

4. Handling Events:

   • mouseover: This event happens when you place your mouse over an element. The code runs a function that checks if the tooltip should be shown.
   • mousemove: This event happens as you move your mouse around. The code runs a function that updates the position of the tooltip so that it follows the mouse.
   • mouseout: This event happens when you move your mouse away from the element. The code hides the tooltip.

Back to the JavaScript Component Hub for Spotfire