# The tooltip next to the cursor

**URL:** <https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782>\
**Category:** Questions\
**Tags:** css2dobject\
**Created:** [September 8, 2023, 6:30am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782 "2023-09-08T06:30:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wannnwdooo1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wannnwdooo1984/32/39555_2.png) [@wannnwdooo1984](https://discourse.threejs.org/u/wannnwdooo1984)\
**Post date:** [September 8, 2023, 6:30am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/1 "2023-09-08T06:30:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ginnychen19](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ginnychen19/32/40109_2.png) [@ginnychen19](https://discourse.threejs.org/u/ginnychen19)\
**Post date:** [September 8, 2023, 6:59am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/2 "2023-09-08T06:59:34Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/4/a49f045afb82aac3256d4c39b44da8ae980ff536.png)

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?

```css
.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.

---

<div class="post-metadata">

**Author:** ![wannnwdooo1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wannnwdooo1984/32/39555_2.png) [@wannnwdooo1984](https://discourse.threejs.org/u/wannnwdooo1984)\
**Post date:** [September 8, 2023, 7:16am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/3 "2023-09-08T07:16:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ginnychen19](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ginnychen19/32/40109_2.png) [@ginnychen19](https://discourse.threejs.org/u/ginnychen19)\
**Post date:** [September 8, 2023, 8:08am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/4 "2023-09-08T08:08:43Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b079cdc0f9d04afd28d272f2273cdbb5b90439dc.png)

---

<div class="post-metadata">

**Author:** ![wannnwdooo1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wannnwdooo1984/32/39555_2.png) [@wannnwdooo1984](https://discourse.threejs.org/u/wannnwdooo1984)\
**Post date:** [September 8, 2023, 8:49am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/5 "2023-09-08T08:49:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 8, 2023, 8:57am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/6 "2023-09-08T08:57:59Z")

</div>

Try this:

```javascript
body {
  margin: 0;
  overflow: hidden; // added
}

```

---

<div class="post-metadata">

**Author:** ![wannnwdooo1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wannnwdooo1984/32/39555_2.png) [@wannnwdooo1984](https://discourse.threejs.org/u/wannnwdooo1984)\
**Post date:** [September 8, 2023, 9:03am UTC](https://discourse.threejs.org/t/the-tooltip-next-to-the-cursor/55782/7 "2023-09-08T09:03:34Z")

</div>

ty, this one works