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>

Answer

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.