Make mouse tooltip in Vue3

Hi, I’m Lovefield.

This article is about how to make a tooltip that follows the mouse.

First, to use the health management library called Pinia, add it using the burn add pinia command and set it up. Or you can choose to use Pinia when creating vue3 projects through your Package Manager.

1-1. create sotre

Create "/src/stores/tooltip.ts" file and write next:

import { ref } from "vue";
import { defineStore } from "pinia";

export const useTooltipStore = defineStore("tooltip", () => {
   const active = ref<boolean>(false);
   const message = ref<string>("");

   function open(text: string) {
       active.value = true;
       message.value = text;
   }

   function close() {
       active.value = false;
       message.value = "";
   }

   return { active, message, open, close };
});

Constant active has the presence or absence of tooltips.
Constant message has a text value to display in the tooltip.
Function open sets the information for opening tooltips.
Function close sets the information for closing the tooltip.

1-2. Create component

Create "/src/components/Tooltip.vue" file and write next:

<template>
   <div
       class="tooltip"
       :class="{ '--active': tooltipStore.active }"
       :style="{ top: `${top}px`, left: `${left}px` }"
   >
       {{ tooltipStore.message }}
   </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useTooltipStore } from "../stores/tooltip";

const tooltipStore = useTooltipStore();
const top = ref<number>(0);
const left = ref<number>(0);

function mouseMoveEvent(e: MouseEvent) {
   if (tooltipStore.active === true) {
       top.value = e.clientY + 15;
       left.value = e.clientX + 15;
   }
}

onMounted(() => {
   window.addEventListener("mousemove", mouseMoveEvent, true);
});

onUnmounted(() => {
   window.removeEventListener("mousemove", mouseMoveEvent, true);
});
</script>

<style lang="scss">
.tooltip {
   display: none;
   position: fixed;
   padding: 5px;
   background: #000;
   color: #fff;
   border-radius: 4px;
   z-index: 100;

   &.--active {
       display: block;
   }
}
</style>

If a component has tooltip enabled, the event has been bound to be positioned based on the mouse position value. OnMounted is a scripted area where a component runs based on when the mount is complete. OnUnmounted is a scripted area that runs when a component is unmounted, on the contrary. Since the event should only work if a component exists, it will delete a global event when it is unmounted.

1-3. Using

Set the following code in the "src/App.vue" file.

<template>
   <div class="wrap">
       <div class="box --red" @mouseover="tooltipOpen('red')" @mouseout="tooltipClose"></div>
       <div class="box --blue" @mouseover="tooltipOpen('blue')" @mouseout="tooltipClose"></div>
   </div>
   <Tooltip />
</template>

<script setup lang="ts">
import Tooltip from "./components/Tooltip.vue";
import { useTooltipStore } from "./stores/tooltip";

const tooltipStore = useTooltipStore();

function tooltipOpen(text: string) {
   tooltipStore.open(text);
}

function tooltipClose() {
   tooltipStore.close();
}
</script>

<style lang="scss">
.wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 100px;
   width: 100vw;
   height: 100vh;

   .box {
       width: 120px;
       height: 120px;

       &.--red {
           background: red;
       }

       &.--blue {
           background: blue;
       }
   }
}
</style>

First, I drew a red box and a blue box on the screen to provide a tooltip. Then, import the tooltip components and the tooltip store. Use the mouseover event to specify a function that enables the tooltip. Use the mouseout event to specify a function that disables the tooltip.

Code and principle are simpler techniques than you think. That's it.