JenniferSoft Design Docs

Appearance

Tooltip ​

툴팁은 사용자 인터페이스에서 특정 요소에 마우스를 올리거나 포커스를 맞췄을 때 나타나는 작은 설명창입니다. 툴팁은 해당 요소의 기능, 용도 또는 추가 정보를 간결하게 전달하는 역할을 합니다.

Deprecated ​

  • 이 컴포넌트(Tooltip)는 더 이상 사용되지 않습니다.
  • 대신 v-tooltip 디렉티브를 사용해 주세요.
  • 기존 컴포넌트는 한시적으로 유지될 수 있으나 향후 제거될 수 있습니다.

Basic ​

vue
<template>
    <tooltip text="This is a tooltip" placement="top">
        <btn type="outlined" text="Hover me" />
    </tooltip>
</template>

<script setup>
import { Btn, Tooltip } from '@jennifersoft/vue-components-v2';
</script>

Props ​

이름타입기본값설명
textstring''툴팁에 표시할 텍스트
placement'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom''top'툴팁이 표시될 위치
maxWidthnumber264툴팁의 최대 너비(px)
offset{ x?: number; y?: number }-툴팁 위치에 추가 적용할 x/y 오프셋
overlayStylePartial<CSSStyleDeclaration>-툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체
tooltipBoxStylePartial<CSSStyleDeclaration>-툴팁 박스(컨테이너)에 적용할 인라인 스타일 객체

다양한 위치의 툴팁 ​

 
 
 
vue
<script setup>
import { Btn, Tooltip } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <div class="flex flex-col gap-8">
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="top-left">
                <btn type="outlined" text="TL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top">
                <btn type="outlined" text="Top" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top-right">
                <btn type="outlined" text="TR" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-top">
                <btn type="outlined" text="LR" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right-top">
                <btn type="outlined" text="RT" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left">
                <btn type="outlined" text="Left" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right">
                <btn type="outlined" text="Right" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-bottom">
                <btn type="outlined" text="LB" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right-bottom">
                <btn type="outlined" text="RB" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="bottom-left">
                <btn type="outlined" text="BL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom">
                <btn type="outlined" text="Bottom" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom-right">
                <btn type="outlined" text="BR" />
            </tooltip>
        </div>
    </div>
</templage>

Props ​

이름타입기본값설명
textstring''툴팁에 표시할 텍스트
placement'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom''top'툴팁이 표시될 위치
maxWidthnumber264툴팁의 최대 너비(px)
offset{ x?: number; y?: number }{ x: 0, y: 0 }툴팁 위치에 추가 적용할 x/y 오프셋
overlayStylePartial<CSSStyleDeclaration>-툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체
tooltipBoxStylePartial<CSSStyleDeclaration>-툴팁 박스(컨테이너)에 적용할 인라인 스타일 객체