Jump to content
  • JavaScript Column Headers Tooltips for Spotfire


    Add rich text tooltips to cross table, graphical table or data table headers

    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. 

    tooltips.gif.85de4a2a51e5e48fd94fad00846d4b10.gif


    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

    • Like 1

    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...