박스 툴팁

<button type="button" class="krds-btn small text krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">
  tooltip-box
  <i class="svg-icon ico-angle right"></i>
</button>

<button type="button" class="krds-btn icon krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">
  <span class="sr-only">도움말</span>
  <i class="svg-icon ico-help"></i>
</button>

<button type="button" class="krds-btn krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">도움말</button>

<template>
  <button type="button" class="krds-btn small text krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">
  tooltip-box
  <i class="svg-icon ico-angle right"></i>
</button>

<button type="button" class="krds-btn icon krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">
  <span class="sr-only">도움말</span>
  <i class="svg-icon ico-help"></i>
</button>

<button type="button" class="krds-btn krds-tooltip tooltip-box" data-tooltip="tooltip-box 툴팁은 150자 내외의 텍스트만 제공되어야 합니다. 내부에 닫기 버튼을 포함한 대화형 요소를 사용하지 않습니다. 본문을 가리지 않도록 주의합니다.">도움말</button>
</template>

<script setup lang="ts">
// 박스 툴팁 컴포넌트
// 박스 형태의 툴팁입니다.

import { ref } from 'vue'

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

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