How do I show a tooltip anchored on the cursor using Vue?

When I attach a tooltip to a child component, I can see it in a static position relative to the child component. I want to show the tooltip in a position relative to the cursor. How do I do that? I also have the child component emitting a signal for when the tooltip should display (show-tooltip) and not (hide-tool-tip), but I'm confused about slot:activator={on}.

Things I've tried:

Since I have to get the cursor position in the child element (a canvas element), I tried to just show a tooltip that moves with the cursor, but 1) I couldn't figure out why it didn't work, and 2) I want to use the Vuetify styling preferably


<canvas id="myCanvas" width="750" height="500"></canvas>
<div style="display:none;">
    <img id="myPic"
<span id="tooltip-span">Web Dev Buddies</span>


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myPic");
var tooltip = document.getElementById("tooltip-span");

img.addEventListener('load', () => {
            ctx.drawImage(img, 0, 0);

canvas.onmousemove = function(e) { = e.clientX + 20; = e.clientY + 20;


#tooltip-span {
    position: absolute;