The tooltip next to the cursor

Good afternoon.
I am trying to attach a tooltip to the mouse when performing certain actions by the user and at this stage I want the tooltip to be correctly located next to the cursor.
The problem is that the tooltip is located at a great distance.
I would be grateful for any hint

I think this might be because the position you’re obtaining from your mouse isn’t quite accurate.

I’ve noticed that when I resize the window, the distance of the cursor decoration also changes accordingly.

You can use console.log to check the current mouse coordinates. Ideally, when your cursor is at the top-left corner, the position values you get on the canvas should be (0,0).

Additionally, if you only want to add a custom cursor decoration, have you considered doing it in CSS like this?

.elem {
    cursor: url('image.svg') 10 5;

This way, you can define the cursor appearance directly in your CSS without having to worry about JavaScript-based positioning.

I added a window resize function and console.log for logging and the tooltip itself by mouse click. Maybe I’m wrong, but it looks right.

I don’t need to change the cursor itself, just add a tooltip under certain conditions

I’ve figured it out. Your (0,0) starts from the center, so you should first get the width and height of the current canvas.

You need to subtract the canvas width/2 and canvas height/2 from event.offsetX and event.offsetY, respectively.

1 Like

Thank you, it really helped.
Do you know how I can disable the scroll appearance when moving the cursor with the tooltip to the lower right corner?

1 Like

Try this:

body {
  margin: 0;
  overflow: hidden; // added

ty, this one works