세로 툴팁

<button type="button" class="krds-btn small text krds-tooltip tooltip-vertical" data-tooltip="tooltip-vertical 옵션입니다">
  tooltip-vertical <i class="svg-icon ico-angle right"></i>
</button>

<button type="button" class="krds-btn icon krds-tooltip tooltip-vertical" data-tooltip="아이콘 버튼에 제공되는 툴팁">
  <span class="sr-only">도움말</span>
  <i class="svg-icon ico-help"></i>
</button>

<button type="button" class="krds-btn krds-tooltip tooltip-vertical" data-tooltip="버튼에 제공되는 툴팁">도움말</button>

<template>
  <button type="button" class="krds-btn small text krds-tooltip tooltip-vertical" data-tooltip="tooltip-vertical 옵션입니다">
  tooltip-vertical <i class="svg-icon ico-angle right"></i>
</button>

<button type="button" class="krds-btn icon krds-tooltip tooltip-vertical" data-tooltip="아이콘 버튼에 제공되는 툴팁">
  <span class="sr-only">도움말</span>
  <i class="svg-icon ico-help"></i>
</button>

<button type="button" class="krds-btn krds-tooltip tooltip-vertical" data-tooltip="버튼에 제공되는 툴팁">도움말</button>
</template>

<script setup lang="ts">
// 세로 툴팁 컴포넌트
// 세로 방향 툴팁입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>