Vue3 에서 마우스 툴팁 만들기
Vue안녕하세요 Lovefield입니다.
이번 글은 마우스를 따라다니는 툴팁을 만드는 방법에 대한 글입니다.
먼저 Pinia라는 상태 관리 라이브러리를 사용하기 위해 bun add pinia 명령어를 사용해 추가하고 사용 설정을 해줍니다. 혹은 사용하시는 패키지 매니저를 통해 vue3 프로젝트를 생성할 때 Pinia를 사용한다고 선택하셔도 됩니다.
1-1. 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 };
});
상수 active는 툴팁의 표시 여부를 가집니다.
상수 message는 툴팁에 표시할 텍스트 값을 가집니다.
함수 open는 툴팁을 열기 위한 정보를 설정합니다.
함수 close는 툴팁을 닫기 위한 정보를 설정합니다.
1-2. 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>
컴포넌트에서 툴팁이 활성화 되어있다면 마우스의 위치 값을 기준으로 위치를 잡도록 이벤트를 바인딩해 주었습니다. onMounted는 컴포넌트가 마운트가 완료된 시점을 기준으로 실행하는 스크립트 영역입니다. onUnmounted는 반대로 컴포넌트가 언마운트 되었을 때 실행되는 스크립트 영역입니다. 컴포넌트가 있는 경우에만 해당 이벤트가 작동해야 하기에, 컴포넌트가 언마운트 되는 시점에는 글로벌 이벤트를 삭제해 줍니다.
1-3. 적용하기
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>
먼저 툴팁을 제공하기 위해 화면에 빨간 상자와 파란 상자를 그려줬습니다. 그다음 툴팁 컴포넌트와 툴팁 스토어를 import합니다. mouseover이벤트를 이용해 툴팁을 활성화하는 함수를 지정해 줍니다. mouseout이벤트를 이용해 툴팁을 비활성화하는 함수를 지정해 줍니다.
생각보다 코드와 원리는 간단 기술입니다. 이상으로 글을 마치겠습니다.
