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

HTML:

<canvas id="myCanvas" width="750" height="500"></canvas>
<div style="display:none;">
    <img id="myPic"
    src="https://styles.redditmedia.com/t5_lwhx6/styles/communityIcon_pkzirstz5ia11.png? 
    width=256&s=c9257e07d87c13b574411c738d4dd8165bd34ce4"
    >
</div>
<span id="tooltip-span">Web Dev Buddies</span>

JS:

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) {
        tooltip.style.left = e.clientX + 20;
        tooltip.style.top = e.clientY + 20;
}

CSS:

#tooltip-span {
    display:block;
    position: absolute;
}

JSFiddle: https://jsfiddle.net/nosu5ghd/1/