JSFiddle - React, Tailwind, and code Playground

by Shpigford

HTML

<div class="tooltip" data-content-box="some_box">Hover me!</div>

<div id="some_box">Yep, it's a box</div>

CSS

.tooltip {
    background:red;
}
#some_box {
    display:none;
    background:blue;
    color:white;
    position:absolute;
}

JavaScript

$(".tooltip").hover(function() {
  var content_id = $(this).data('content-box');

  $("#"+content_id).position({
      my:        "center top",
      at:        "center bottom",
      of:        this,
      collision: "fit"
  }).show();
}, function() {
  var content_id = $(this).data('content-box');
  $("#"+content_id).hide();
});