Make mouse tooltip in Vue3
VueHi, 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 bun 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
/src/stores/tooltip.ts
javascript
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
/src/components/Tooltip.vue
html
<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
src/App.vue
html
<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.
