如何在 React js 中悬停时在光标位置附近显示 div？

Question

I have two Text Items, item1 and item2, and a div with some text inside. I want to keep the div hidden by default but show it at cursor position when I hover on Text item1 or item2. Please check the sample GIF animation in this Link

I tried this in Jquery code inside React. But it gives error.

$(".text-item").mouseenter(function (e) {
  $(".box")
    .css({
      position: "absolute",
      right: e.pageX,
      top: e.pageY,
      display: "block",
    })
    .show();
});

Answer 1

Try this:

import {useState, Fragment} from react;

const [visible, setVisible] = useState(false)

const MyApp = ()=> {
  return ( 
      <Fragment> {
         visible && 
         <div className="hiddenContainer>
            <p>Your hidden text</p>
         </div>
      }
      </Fragment>
      <p onMouseEnter={()=>setVisible(!visible)}>Item 1</p>
      <p onMouseEnter={()=>setVisible(!visible)}>Item 2</p>
    )
  }