Vue3 Typescript HOVER-TOOLTIP UI Guide

설치

npm install halox-hover-tooltip-ts

Description

Vue3+Typescript에서 지원하는 호버툴팁 라이브러리입니다.

항상 최신 버전을 유지해주세요.

필요한 개선 요청은 깃헙 이슈로 남겨주세요.

Features

• 커스텀 툴팁 내용
• 커스텀 양식
• 위치 자동 조절

Changelog

• node v24.12.0
• vue 3.5.25

Usage Example

<script lang="ts" setup>
import 'halox-hover-tooltip-ts/dist/halox-hover-tooltip-ts.css';
import Tooltip, { vTooltip } from 'halox-hover-tooltip-ts';
</script>

/* 사용자의 다른 스타일들을 여기에 작성 */
:global(.custom) {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-line;
  backdrop-filter: blur(4px);
}

Main Components

  <div v-tooltip="{ text: '토끼가 세상에 태어난 날입니다.', class: 'custom' }">
    오늘은?
  </div>
 <Tooltip />