Tooltip 툴팁

글자 힌트를 보여 주는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요?

마우스를 글자 위로 올렸을 때 조금 더 자세한 힌트가 필요할 때 사용해요.

기본 사용법

:::demo 기본으로 트리거 요소 위에 힌트를 표시해요. position으로 표시 위치를 바꾸고, content로 힌트 내용을 정하고, show-animation으로 애니메이션 사용 여부를, disabled로 컴포넌트 사용 가능 여부를, enterable로 마우스를 tooltip 안으로 들여보낼 수 있는지 설정할 수 있어요.

<template>
  <div class="demo-btn-group">
    <d-tooltip position="left" content="I am a HTML Element!">
      <d-button>left</d-button>
    </d-tooltip>
    <d-tooltip content="I am a HTML Element!">
      <d-button>top</d-button>
    </d-tooltip>
    <d-tooltip position="bottom" :content="message">
      <d-button>bottom</d-button>
    </d-tooltip>
    <d-tooltip position="right" :content="message">
      <d-button>right</d-button>
    </d-tooltip>
    <d-tooltip content="No Animation" :show-animation="false">
      <d-button>No Animation</d-button>
    </d-tooltip>
    <d-tooltip content="disabled" disabled>
      <d-button>disabled</d-button>
    </d-tooltip>
    <d-tooltip content="鼠标不可进入tooltip" :enterable="false">
      <d-button>鼠标不可进入tooltip</d-button>
    </d-tooltip>
    <d-tooltip content="tooltip出现后自动隐藏" :hide-after="1000">
      <d-button>tooltip出现后自动隐藏</d-button>
    </d-tooltip>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    return {
      message: ref('Upload a file in sh,js,ts,java,css,html,xml.aql,rb,py,php,c,cpp,txt format.'),
    };
  },
});
</script>

<style>
.demo-btn-group > * {
  margin-right: 8px;
  margin-bottom: 12px;
}
</style>

:::

지연 트리거

:::demo 마우스가 들어온 지 mouse-enter-delay 밀리초가 지나야 트리거돼요. 사용자가 무심코 지나가다 깜빡이는 걸 막기 위해서예요. 기본값은 150밀리초예요. 마우스가 나간 후 mouse-leave-delay 밀리초가 지나야 Tooltip 컴포넌트가 숨겨지고, 기본값은 100밀리초예요.

<template>
  <div class="demo-btn-group">
    <d-tooltip content="Mouse enter 500ms later. <br> Show me" :mouse-enter-delay="500">
      <d-button variant="solid">MouseEnter delay 500ms</d-button>
    </d-tooltip>
    <d-tooltip content="Mouse leave 1000ms later. <br> Hide me" :mouse-leave-delay="1000">
      <d-button>MouseLeave delay 1000ms</d-button>
    </d-tooltip>
  </div>
</template>

:::

content 슬롯 사용

:::demo

<template>
  <div class="demo-btn-group">
    <d-tooltip>
      <d-button>Overflow Hidden</d-button>
      <template #content>
        <div class="tooltip-box">{{ message }}</div>
      </template>
    </d-tooltip>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    return {
      message: ref(
        '规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。'
      ),
    };
  },
});
</script>

<style>
.tooltip-box {
  max-height: 150px;
  max-width: 300px;
  overflow: auto;
  padding: 10px;
}
</style>

:::

Tooltip 파라미터

Tooltip 슬롯

Tooltip 타입 정의

BasePlacement

type BasePlacement = 'top' | 'right' | 'bottom' | 'left';

더 알아보기 (Learn more)

Tooltip으로 마우스 오버 시 힌트를 보여 줄 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.