JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div class="target" data-target-path="abc.123">
</div>
<div class="target" data-target-path="def.456">
</div>

CSS

.target {
  width: 50px;
  height: 50px;
  margin:10px;
  background-color:rgba(58,193,255,.7);
  border: 2px solid #000;
  border-radius:3px;
}

.tooltip {
border: 1px solid #000;
  background: rgba(230,230,150,1);
  width:auto;
  display:inline-block;
  padding:5px;
  position:absolute;
}

JavaScript

var tooltipHtml = '<div class="tooltip"></div>';

$(".target").each(function(){
  var $this = $(this);
  var myTooltip = $(tooltipHtml).html("select " + $this.attr('data-target-path'));
  
});