JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="comment">
    <div id="id001">
      <p class="post">001 何かしらのコメント</p>
    </div>
    <div id="id002">
      <p class="post">002 何かしらのコメント</p>
    </div>
    <div id="id003">
      <p class="post">003 何かしらのコメント</p>
    </div>
    <div id="id004">
      <p class="post">004 何かしらのコメント
        <a href="id002" class="anc" title="002">>>2</a>
      </p>
    </div>
    <div id="id005">
      <p class="post">005 何かしらのコメント
        <a href="id001" class="anc" title="001">>>1</a>
      </p>
    </div>
  </div>
</div>

CSS

.pop {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 9999;
}

.pop.active {
  opacity: 1;
  transition: .3s ease;
}

.pop p {
  display: block;
}

JavaScript

(function($) {
  $(function() {
    $("#container").prepend("<div class='pop'>");
    $(".anc").on("mouseenter", function(e) {
        var anc = $(this).attr("href"),
          res = $("#" + anc).html(),
          x = e.pageX,
          y = e.pageY;

        $(".pop")
          .append(res)
          .css({
            transform: "translate3d("+x+"px,"+y+"px,0)"
          })
          .addClass("active")
          .show();
      })
      .on("mouseleave", function() {
        $(".pop")
          .empty()
          .removeAttr("style")
          .removeClass("active")
          .hide();
      });
  })
})(jQuery);