Insert a two column table with image and text data, within a single tooltip

I’m working on a website and I need to create a two column table (one column for images, the other for text) within a single tooltip. The purpose of the tooltip is to bring up a quick guide for reference, featuring an image of a product with its title. To take it a step further, I’d love to have the tooltip be sticky like on this site when you hover over ‘About’ or ‘Work’. I’ve done quite a bit of research so I’m assuming that this is not possible with pure CSS, but I am new to Javascript so I’m not quite sure where to begin. I added in some code to illustrate what I’m looking for. Essentially, when the user hovers over ‘Check here’, I’d like the orange table to show within the tooltip. Any help is much appreciated.

table{
    width: 98%;
    background-color: orange;
}

td {
  border-bottom: 1px solid black;
}

img{
    width: 40px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid black;
  margin-bottom: 60px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  background-color: yellow;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<p>Not sure of what product you have?</p> 

<div class="tooltip">Check here.<span class="tooltiptext">Table should go here</span>
</div>


<table>

  <tr>
    <td><img src="site/circle.png" alt="Red circle"></td>
    <td>Circle</td>
  </tr>
  <tr>
    <td><img src="site/square.png" alt="Blue square"></td>
    <td>Square</td>
  </tr>
  <tr>
    <td><img src="site/hexagon.png" alt="Yellow hexagon"></td>
    <td>Hexagon</td>
  </tr>
</table>

48 thoughts on “Insert a two column table with image and text data, within a single tooltip”

  1. You were really close to the CSS-only solution: just put your table code where you currently have the text "table should go here".

    table{
        width: 98%;
        background-color: orange;
    }
    
    td {
      border-bottom: 1px solid black;
    }
    
    img{
        width: 40px;
    }
    
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px solid black;
      margin-bottom: 60px;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      top: 100%;
      left: 50%;
      margin-left: -60px;
      background-color: yellow;
      color: black;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
    <p>Not sure of what product you have?</p> 
    
    <div class="tooltip">Check here.<span class="tooltiptext"><table>
    
      <tr>
        <td><img src="site/circle.png" alt="Red circle"></td>
        <td>Circle</td>
      </tr>
      <tr>
        <td><img src="site/square.png" alt="Blue square"></td>
        <td>Square</td>
      </tr>
      <tr>
        <td><img src="site/hexagon.png" alt="Yellow hexagon"></td>
        <td>Hexagon</td>
      </tr>
    </table></span>
    </div>

    If you want the tooltip to stick to the mouse position as in your linked example, that puts you in javascript territory; many implementations of this already exist so I’d suggest just choosing one that suits your needs (searching for "tooltip plugin javascript" gives you many options) instead of rolling your own.

    Reply
  2. I think this should help you out


    1. Add the data-tooltip attribute to an element and give it a value of the tooltip ID.
    <span data-tooltip="tooltip_html">HTML<span>
    
    1. Add a tooltip class to the tooltip element as well
    <div class="tooltip" id="tooltip_html">Hypertext Markup Language</div>
    

    I just showed you a way of doing it. Of course you can optimize my code and make it even better.

    Code

    // Get all your text that need a tooltip
    const objects = document.querySelectorAll("[data-tooltip]");
    
    // Handle the mouse movement
    objects.forEach(object =>
      object.addEventListener("mousemove", ({ clientX, clientY }) => {
        // Get the tooltip id
        const tooltipId = object.getAttribute("data-tooltip");
    
        // Get the tooltip ifself
        const tooltip = document.getElementById(tooltipId);
    
        // Make the tooltip visible
        tooltip.style.display = "block";
    
        // Position the tooltip the same as your mouse pointer
        tooltip.style.left = `${clientX}px`;
        tooltip.style.top = `${clientY}px`;
      })
    );
    
    objects.forEach(object =>
      object.addEventListener("mouseout", ({ clientX, clientY }) => {
        // Get your tooltip id
        const tooltipId = object.getAttribute("data-tooltip");
    
        // Get the tooltip itself
        const tooltip = document.getElementById(tooltipId);
    
        // Hide your tooltip
        tooltip.style.display = "none";
      })
    );
    .tooltip {
            display: none;
            position: absolute;
            pointer-events: none;
            top: 0;
            left: 0;
    }
    <span data-tooltip="tooltip0">Not sure of what product you have?</span> 
    
    <br>
        
    <span data-tooltip="tooltip1" id="check-here">Check here</span>
    
    <br>
    
    <span data-tooltip="tooltip2" id="check-here">It works!</span>
    
    <br>
    
    <span data-tooltip="tooltip3">HTML</span><span> was developed in 1993.</span>
    
    
    
    
    <h1 class="tooltip" id="tooltip0">:)</h1>
    
    
    <div class="tooltip" id="tooltip1">
       <p>Your content</p>
    </div>
    
        
    <div class="tooltip" id="tooltip2">
       <p>Horaaaaaaaaay!</p>
    </div>
    
    <div class="tooltip" id="tooltip3">
        <h3>What is HTML?</h3>
       <p> HTML stands for Hypertext Markup Language and it is the standard markup language for documents designed to be displayed in a web browser.</p>
    </div>
    Reply

Leave a Comment