JenniferSoft Design Docs

Appearance

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>

다양한 위치의 툴팁 ​

 
 
 
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>

API ​

이름타입기본값설명
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)
overlayStylePartial<CSSStyleDeclaration>-툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체

상세 설명 ​

  • text: 툴팁에 표시할 문자열입니다.
  • placement: 툴팁이 표시될 위치를 지정합니다.
  • maxWidth: 툴팁의 최대 너비를 지정합니다.
  • overlayStyle: 툴팁 팝업(레이어) 영역에 인라인 스타일을 직접 지정할 수 있습니다.