v-tooltip

v-tooltip 디렉티브는 요소에 툴팁(Tooltip)을 간편하게 표시할 수 있도록 도와주는 커스텀 디렉티브입니다.
텍스트, 위치, 옵션 등을 통해 툴팁을 자유롭게 제어할 수 있습니다.

✅ 기본 사용법

일반적인 마크업에서도 사용 가능합니다.

vue

<sc-button v-tooltip="`툴팁입니다.`">툴팁</sc-button>
<sc-button
  v-tooltip="`HTML<span style='color: yellow'>태그</span>지원<br />안녕<br />하세요`"
>
  html 툴팁
</sc-button>

<div class="mt-5">
  <span v-tooltip="`툴팁!`">일반적인 마크업에서도 사용 가능합니다.</span>
</div>

✨ 사용 예시 모음

▸ 위치지정 placement

vue

<div class="my-5">
  <sc-button v-tooltip.left="`왼쪽 툴팁입니다.`">LEFT</sc-button>
  <sc-button v-tooltip="`위쪽 툴팁입니다.`">TOP</sc-button>
  <sc-button v-tooltip.bottom="`아래쪽 툴팁입니다.`">BOTTOM</sc-button>
  <sc-button v-tooltip.right="`오른쪽 툴팁입니다.`">RIGHT</sc-button>
</div>

▸ 테마 - white

vue

<div class="mt-5">
  <sc-button v-tooltip:white.left="`왼쪽 툴팁입니다.`">LEFT</sc-button>
  <sc-button v-tooltip:white="`위쪽 툴팁입니다.`">TOP</sc-button>
  <sc-button v-tooltip:white.bottom="`아래쪽 툴팁입니다.`">BOTTOM</sc-button>
  <sc-button v-tooltip:white.right="`오른쪽 툴팁입니다.`">RIGHT</sc-button>
</div>

🔧 디렉티브 사용 위치

일반 HTML 요소 (div, button, span, 등)에 적용
컴포넌트의 루트 엘리먼트에도 적용 가능 (단, 렌더 시점 주의)

🎨 스타일 클래스

툴팁은 외부 라이브러리 또는 내부 유틸을 통해 렌더링되며, 다음 클래스가 사용될 수 있습니다:

클래스 이름	설명
`.tooltip`	툴팁의 기본 클래스

※ 클래스는 환경에 따라 다를 수 있으며 필요 시 오버라이딩 가능

v-tooltip ​

✅ 기본 사용법 ​

✨ 사용 예시 모음 ​

▸ 위치지정 placement ​

▸ 테마 - white ​