The tooltip next to the cursor

Questions
1

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.
https://codesandbox.io/s/exciting-bohr-h35slg?file=/src/App.vue
I would be grateful for any hint

2

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.

image
image411×603 44 KB

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.

3

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

4

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.

image
image1471×723 135 KB

1 Like
5

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
6

Try this:

body {
  margin: 0;
  overflow: hidden; // added
}
2 Likes
7

ty, this one works