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>

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

  1. Pingback: cost of viagra
  2. Pingback: viagra pill
  3. Pingback: viagra buy online
  4. Pingback: canadian viagra
  5. Pingback: cialis usa
  6. Pingback: cialis samples
  7. Pingback: cialis generic
  8. Pingback: cialis 2.5 mg
  9. Pingback: buy viagra
  10. Pingback: viagra
  11. Pingback: viagra gel tabs

Leave a Comment