JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div id="t1" class="tools">
  content<br>content<br>content<br>content<br>content
</div>
<br><br>
<div id="t2" class="tools">
  content2<br>content2<br>content2<br>content2<br>content2
</div>
<br><br>
<div id="t3" class="tools">
  content3<br>content3<br>content3<br>content3<br>content3
</div>

<div class="toolset">
  <ul>
    <li><a href="#">DRAG</a></li>
    <li><a href="#">DELETE</a></li>
  </ul>
</div>

CSS

.toolset {
  border: solid 1px black;
  padding-right: 20px;
  display: none;
  position: absolute;
  pointerevents: none;
}

.tools {
  border: solid 1px red;
  margin: 10px;
  padding: 10px;
}

#t1 {
  width: 600px;
}
#t2 {
  width: 400px;
}

JavaScript

$(function(){
  var cur = 'N/A';
	$('.tools').hover(function(e){
    var $o = $(this).offset(),
    	$t = $('.toolset');
    $t.hide().css( { top: $o.top, left: $o.left + $(this).width() - $t.width() } ).show();
    cur = this.id;
  },function(e){
    var $t = $('.toolset');
    $t.hide();
  });
	$('.toolset').hover(function(e){
    $(this).show();
  },function(e){
    $(this).hide();
  });
	$('.toolset a').click(function(e){
  	e.preventDefault();
    alert('div ' + cur + ': ' + $(this).text());
  });
});