KRDS Vue

툴팁 Tooltip ​

툴팁은 요소나 본문 텍스트에 제공되는 짧은 부가 설명이다. 설명이 필요한 대상 또는 별도의 활성화 버튼에 마우스를 올리거나 초점을 이동했을 때 설명 텍스트가 표시된다.

KRDS 가이드

기본 ​

type으로 트리거 버튼 모양(default, icon, button)을 정합니다. 툴팁은 버튼 옆에 표시되고 Esc 키나 창 스크롤로 닫힙니다.

vue
<script setup lang="ts">
  import { KrdsTooltip } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; align-items: flex-start; gap: 10px">
    <KrdsTooltip tooltip-content="툴팁의 기본 설정입니다"> tooltip-horizontal <i class="svg-icon ico-angle right"></i> </KrdsTooltip>
    <KrdsTooltip type="icon" tooltip-content="아이콘 버튼에 제공되는 툴팁">
      <span class="sr-only">도움말</span>
      <i class="svg-icon ico-help"></i>
    </KrdsTooltip>
    <KrdsTooltip type="button" tooltip-content="버튼에 제공되는 툴팁"> 도움말 </KrdsTooltip>
  </div>
</template>

세로 배치 (vertical) ​

vertical을 지정하면 툴팁이 버튼 위나 아래에 표시됩니다.

vue
<script setup lang="ts">
  import { KrdsTooltip } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; align-items: flex-start; gap: 10px">
    <KrdsTooltip vertical tooltip-content="툴팁의 기본 설정입니다">
      tooltip-horizontal <i class="svg-icon ico-angle right"></i>
    </KrdsTooltip>
    <KrdsTooltip vertical type="icon" tooltip-content="아이콘 버튼에 제공되는 툴팁">
      <span class="sr-only">도움말</span>
      <i class="svg-icon ico-help"></i>
    </KrdsTooltip>
    <KrdsTooltip vertical type="button" tooltip-content="버튼에 제공되는 툴팁"> 도움말 </KrdsTooltip>
  </div>
</template>

박스형 (box) ​

box를 지정하면 여러 줄 설명에 맞는 박스형 툴팁이 버튼 위나 아래에 표시됩니다.

vue
<script setup lang="ts">
  import { KrdsTooltip } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; align-items: flex-start; gap: 10px">
    <KrdsTooltip box tooltip-content="툴팁의 기본 설정입니다"> tooltip-horizontal <i class="svg-icon ico-angle right"></i> </KrdsTooltip>
    <KrdsTooltip box type="icon" tooltip-content="아이콘 버튼에 제공되는 툴팁">
      <span class="sr-only">도움말</span>
      <i class="svg-icon ico-help"></i>
    </KrdsTooltip>
    <KrdsTooltip box type="button" tooltip-content="버튼에 제공되는 툴팁"> 도움말 </KrdsTooltip>
  </div>
</template>

KrdsTooltip ​

Props

이름타입기본값설명
typeTooltipType'default'트리거 버튼 타입
disabledbooleanfalse비활성화 여부
verticalbooleanfalse세로 방향 배치 여부
boxbooleanfalse박스형 여부
tooltipContent (필수)string-툴팁 본문

Slots

이름설명
default툴팁을 여는 버튼 내용