PopoverBalloon

위치 기반 팝오버 말풍선 컴포넌트입니다.

인터랙티브 데모

버튼을 눌러 말풍선을 열고 위치와 화살표를 조정하세요. PopoverBalloon의 콘텐츠는 기본 슬롯으로 전달했습니다.

개요

PopoverBalloon은 특정 요소 주변에 말풍선 형태의 팝오버를 표시하는 컴포넌트입니다. HTML 콘텐츠를 지원하며, 다양한 위치와 스타일링 옵션을 제공합니다.

Props

interface Props {
    content: string; // HTML 문자열 지원
    position?: PopoverPosition; // 위치 (기본: 'right')
    offset?: number; // 오프셋 (기본: 10px)
    cursorNone?: boolean; // 화살표 숨김 (기본: false)
    contentPadding?: number; // 콘텐츠 패딩 (기본: 24px)
}

type PopoverPosition =
    | 'top'
    | 'top-left'
    | 'top-right'
    | 'bottom'
    | 'bottom-left'
    | 'bottom-right'
    | 'left'
    | 'right';

기본 사용법

<template>
    <div
        class="trigger"
        @mouseover="showPopover = true"
        @mouseleave="showPopover = false"
    >
        마우스를 올려보세요
        <PopoverBalloon
            v-if="showPopover"
            content="<strong>팝오버</strong> 내용입니다."
            position="top"
            :offset="15"
        />
    </div>
</template>

<script setup>
import { PopoverBalloon } from '@jennifersoft/apm-components';
import { ref } from 'vue';

const showPopover = ref(false);
</script>

위치 옵션

• top, top-left, top-right: 상단 배치
• bottom, bottom-left, bottom-right: 하단 배치
• left, right: 좌/우측 배치

---

TooltipBalloon

간단한 툴팁 말풍선 컴포넌트입니다.

개요

TooltipBalloon은 PopoverBalloon의 경량화 버전으로, 간단한 텍스트 툴팁을 표시할 때 사용합니다.

Props

interface Props {
    text: string; // 툴팁 텍스트
    position?: TooltipPosition; // 위치 (기본: 'top')
    visible?: boolean; // 표시 여부 (기본: false)
}

기본 사용법

<template>
    <div class="tooltip-container">
        <button
            @mouseover="showTooltip = true"
            @mouseleave="showTooltip = false"
        >
            버튼
        </button>
        <TooltipBalloon
            text="버튼을 클릭하세요"
            position="top"
            :visible="showTooltip"
        />
    </div>
</template>

---

NodeTooltip

노드 요소용 전용 툴팁 컴포넌트입니다.

개요

NodeTooltip은 토폴로지나 관계 트리의 노드에 표시되는 전용 툴팁입니다. 노드의 메트릭 정보를 구조화된 형태로 표시합니다.

Props

interface Props {
    width: number; // 노드 너비
    x: number; // X 좌표
    y: number; // Y 좌표
    translateX: number; // X 변환값
    translateY: number; // Y 변환값
    data: NodeData; // 노드 데이터
    cursorNone?: boolean; // 커서 숨김
    scale?: number; // 스케일 (기본: 1)
    useSimpleTooltip?: boolean; // 간단한 툴팁 모드
}

기본 사용법

<template>
    <NodeTooltip
        :width="nodeWidth"
        :x="nodePosition.x"
        :y="nodePosition.y"
        :translate-x="viewportTranslateX"
        :translate-y="viewportTranslateY"
        :data="nodeData"
        :scale="currentScale"
        :use-simple-tooltip="false"
    />
</template>

---

TextInNode

노드 내부에 표시되는 텍스트 컴포넌트입니다.

개요

TextInNode는 토폴로지나 관계 트리의 노드 내부에 텍스트를 표시하는 컴포넌트입니다. 텍스트 길이에 따른 자동 줄바꿈과 말줄임표를 지원합니다.

Props

interface Props {
    text: string; // 표시할 텍스트
    maxWidth?: number; // 최대 너비 (기본: 무제한)
    fontSize?: number; // 폰트 크기 (기본: 14px)
    textAlign?: 'left' | 'center' | 'right'; // 텍스트 정렬 (기본: 'center')
    ellipsis?: boolean; // 말줄임표 사용 (기본: true)
}

기본 사용법

<template>
    <div class="node">
        <TextInNode
            :text="nodeName"
            :max-width="120"
            :font-size="12"
            text-align="center"
            :ellipsis="true"
        />
    </div>
</template>

<script setup>
import { TextInNode } from '@jennifersoft/apm-components';

const nodeName = ref('Very Long Node Name That Should Be Truncated');
</script>

공통 사용 패턴

호버 툴팁 패턴

<template>
    <div
        class="interactive-element"
        @mouseenter="showTooltip = true"
        @mouseleave="showTooltip = false"
    >
        콘텐츠
        <PopoverBalloon
            v-if="showTooltip"
            :content="tooltipContent"
            position="top"
        />
    </div>
</template>

조건부 툴팁

<template>
    <div class="node-container">
        <TextInNode :text="nodeText" :max-width="100" />
        <NodeTooltip
            v-if="nodeText.length > 20"
            :data="nodeDetails"
            v-bind="tooltipProps"
        />
    </div>
</template>

의존성

• Vue 3 Composition API
• CSS Variables for theming