This Gist contains a jQuery and CSS to create a tooltip for Ninja Tables that displays an image preview when hovering over a link. The tooltip will only appear if the link contains an href attribute. I have recorded a video for you where I have demonstrated the whole process; please take a moment to view the video: https://jam.dev/c/23acad4a-72b…

Ninja Tables Image Tooltip with Hover Effect.js

/*
* This code snippet allows you to add image tooltips to cells in a Ninja Table. 
* The tooltip displays an image when hovering over a table cell containing a link. 
* Add the JS code to the custom JS field, the CSS code to the custom CSS field,
* and use the provided HTML structure in your table cells.
*/

<!-- HTML structure for table cells with image tooltips -->
<a class="imageTooltip" href="https://fairsnail.s4-tastewp.com/wp-content/uploads/woocommerce-placeholder.png">
  <img src="https://fairsnail.s4-tastewp.com/wp-content/uploads/woocommerce-placeholder.png" />
  Your Text
 </a>


// jQuery code to enable image tooltips on hover

$(document).ready(() => {
  let imageTooltip = true;

  $(".imageTooltip").hover(
    function(event) {
      const imgUrl = $(this).attr("href");
      if (imgUrl && imageTooltip) {
        imageTooltip = false;

        $("#imageTooltip").remove();

        setTimeout(() => {
          const left = event.pageX - 30;
          const top = event.pageY - 235;
          $("body").append(`
            <div id='imageTooltip' style='left:${left}px;top:${top}px' class='tooltip tooltip-arrow tooltip-down'>
              <img src='${imgUrl}' style='background-size:cover'/>
            </div>
          `);
          imageTooltip = true;
        }, 1000);
      }
    },
    function() {
      if (imageTooltip) {
        $("#imageTooltip").remove();
      }
    }
  );
});

/* CSS for styling the tooltip */
.tooltip {
  width: 250px;
  height: 200px;
  min-height: 60px;
  box-sizing: border-box;
  position: absolute;
  z-index: 999;
  background: #fff;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 5s;
  text-align:center;
}

.tooltip img {
  width: 220px;
  height: 180px;
}

.tooltip-arrow:before,
.tooltip-arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  border: 10px solid transparent;
  border-bottom-color: white;
  left: 50%;
  margin-left: -10px;
}

.tooltip-arrow:before {
  border-width: 11px;
  border-bottom-color: #c4c4c4;
  margin-left: -11px;
}

.tooltip-down:after,
.tooltip-down:before {
    bottom: auto;
    top: 100%;
    left: 0;
    margin-left: 15px;
    border-bottom-color: transparent;
    border-top-color: #fff;
}

.tooltip-down:before {
  margin-left: 14px;
}

.tooltip-down:before {
  border-top-color: #c4c4c4;
  -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
}

[data-outline="1"] {
  outline: 2px solid #ff5454 !important
}