JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

<div id='custom-tooltip'>
  <img src='https://static.anychart.com/images/kitty.png' width=50 height=50>
</div>

CSS

html,
 body,
 #container {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
 #custom-tooltip {
   position: absolute; 
   pointerEvents: none;
   padding: 4px;
   border: solid black 2px;
   display: block;
   z-index: 10000;
 }

JavaScript

anychart.onDocumentReady(function() {

  /* Set HTML content and styles for
  custom title and body of tooltip  */
  var tooltip = document.getElementById('custom-tooltip');
  
  var container = document.getElementById('container');

  var data = anychart.data.set([
    ["Column 1", 10],
    ["Column 2", 12],
    ["Column 3", 18],
    ["Column 4", 6],
    ["Column 5", 46]
  ]);

  chart = anychart.column();

  var series = chart.column(data);

  // disable default tooltip
  series.tooltip(false);

  chart.interactivity().selectionMode("singleSelect");
  chart.legend().enabled(false);

  chart.listen("mouseMove", function(e) {
    var clientX = e['offsetX'];
    var clientY = e['offsetY'];

    tooltip.style.left = clientX + 20+"px";
    tooltip.style.top = clientY + 10+"px";
  });

  // draw
  chart.container("container");
  chart.draw();
});