JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<li href="#" class="features">Hello</li>
  <div class="pop-up4">
      <h3>John Doe</h3>
      <p>Hi! My name is John Doe</p>
  </div>



  <li class="features">Welcome</li>
  <div class="pop-up4">
      <h3>Jane Doe</h3>
      <p>Hi! My name is Jane Doe</p>
  </div>

CSS

div.pop-up4 {
  left:100px;
  display: none;
  position: absolute;
  width: 280px;
  padding-right: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

JavaScript

jQuery(function() {
    var moveLeft = 20;
    var moveDown = 10;

    jQuery('li.features').hover(function(e) {
      jQuery(this).next('.pop-up4').show();
        //.css('top', e.pageY + moveDown)
        //.css('left', e.pageX + moveLeft)
        //.appendTo('body');
    }, function() {
      jQuery(this).next('.pop-up4').hide();
    });

    jQuery('li.features').mousemove(function(e) {
      jQuery(this).next('.pop-up4')
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft);
    });
});