JenniferSoft Design Docs

Appearance

CloneTooltip ​

CloneTooltip 컴포넌트는 기존 컴포넌트의 DOM 구조를 변경하지 않고 툴팁 기능을 추가할 수 있는 래퍼 컴포넌트입니다. 기존 Tooltip 컴포넌트와 달리 자식 요소를 복제(clone)하여 이벤트 핸들러만 주입하는 방식으로 동작합니다.

기본 사용법 ​

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

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

Basic ​

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

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

다양한 위치의 툴팁 ​

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

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: 툴팁 팝업(레이어) 영역에 인라인 스타일을 직접 지정할 수 있습니다.

Tooltip과 CloneTooltip의 차이점 ​

Tooltip ​

  • 자식 요소를 <div class="js-tooltip-wrapper"> 로 감싸서 DOM 구조가 변경됨
  • 추가된 래퍼 요소로 인해 스타일이나 레이아웃에 영향을 줄 수 있음

CloneTooltip ​

  • 자식 요소의 DOM 구조를 변경하지 않고 이벤트 핸들러만 주입
  • 자식 요소를 복제(clone)하여 사용하므로 원래 구조와 스타일을 유지
  • Teleport를 사용하여 툴팁 요소를 body에 직접 렌더링

사용 사례 ​

CloneTooltip은 다음과 같은 상황에서 특히 유용합니다:

  1. 기존 컴포넌트의 DOM 구조를 유지해야 하는 경우
  2. 래퍼 요소로 인한 스타일 충돌을 피해야 하는 경우
  3. 메뉴 아이템, 버튼 등 정교한 스타일링이 적용된 요소에 툴팁을 추가할 때

주의사항 ​

  • CloneTooltip은 단일 자식 요소만 지원합니다. 여러 자식 요소가 있는 경우 첫 번째 요소만 사용됩니다.
  • 자식 요소는 반드시 유효한 Vue 컴포넌트 또는 HTML 요소여야 합니다.