Position Tooltip based on pointer position

[shmoeaz]

Is there a way to position the tooltip relative to the pointer position rather than the content element position?
I see the "float" option does something similar, however, we don't want the tooltip to follow the pointer and move. We just want the initial display of the tooltip to be relative to the pointer position.
Any ideas how to achieve this?

[gabrieljablonski]

I'm not sure what you're trying to achieve since you weren't super specific, but here's an example using the click event and watching for the onClick event on the anchor.

function App() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

  return (
    <div>
      <button
        data-tooltip-id="my-tooltip"
        data-tooltip-content={`I'm placed at (x:${position.x}, y:${position.y})`}
        onClick={(e) => {
          setPosition({
            x: e.clientX,
            y: e.clientY,
          });
        }}
      >
        Click me
      </button>
      <Tooltip id="my-tooltip" events={['click']} position={position} />
    </div>
  );
}

Using the hover event and watching for onMouseEnter on the button didn't feel that great, since the tooltip is always placed on the borders. It could be solved by setting the position with a timeout, but it will depend on what you're trying to achieve.