Tooltip

특정 UI 요소 위에서 해당 요소에 대한 간략한 레이블이나 추가적인 정보를 제공합니다.

enum Tooltip

Overview

툴팁은 사용자가 특정 UI 요소를 이해하는데 도움이 되는 짧은 설명을 보여주기 위해 사용됩니다. 화살표가 있는 말풍선 형태로 표시되며, 화살표의 위치와 방향을 설정할 수 있습니다.

// 버튼을 클릭하면 표시되는 툴팁 (click 모드)
@State private var showTooltip = false

Button {
    showTooltip.toggle()
}, label: {
    HStack {
        Text("Montage")
        Image.icon(.circleInfo)
    }
})
.tooltip(
    isPresented: $showTooltip,
    mode: .click,
    position: .top(),
    message: "Montage는 컴포넌트 기반의 디자인 시스템입니다."
)

// 화면에 진입하면 표시되는 툴팁 (always 모드)
Button("설정") {
    showTooltip.toggle()
    setupSomething() // 설정 화면으로 이동
}
.tooltip(
    isPresented: $showTooltip,
    mode: .always,
    position: .bottom(arrowPosition: .leading),
    size: .small,
    message: "서비스 이용을 위해 설정이 필요합니다."
)

Topics

Enumerations

enum ActionMode

툴팁의 표시 모드를 정의하는 열거형입니다.

Enumeration Cases

case always

바인딩으로만 닫힘을 제어할 수 있습니다. 주로 화면이 노출될 때 항상 표시되는 툴팁에 사용됩니다.

case click

백그라운드를 터치하거나 스크롤을 할 시 닫힙니다. 주로 클릭 시에 표시되는 툴팁에 사용됩니다.

enum Position

툴팁이 표시될 위치를 정의하는 열거형입니다.

Enumeration Cases

case bottom(arrowPosition: HorizontalAlignment)

하단에 툴팁 표시

  • Parameters
    ParameterDescription
    arrowPosition화살표의 수평 위치, 생략하면 기본값으로 .center 적용
case leading(arrowPosition: VerticalAlignment)

왼쪽에 툴팁 표시

  • Parameters
    ParameterDescription
    arrowPosition화살표의 수직 위치, 생략하면 기본값으로 .center 적용
case top(arrowPosition: HorizontalAlignment)

상단에 툴팁 표시

  • Parameters
    ParameterDescription
    arrowPosition화살표의 수평 위치, 생략하면 기본값으로 .center 적용
case trailing(arrowPosition: VerticalAlignment)

오른쪽에 툴팁 표시

  • Parameters
    ParameterDescription
    arrowPosition화살표의 수직 위치, 생략하면 기본값으로 .center 적용
enum Size

툴팁의 크기를 정의하는 열거형입니다.

Enumeration Cases

case medium

중간 크기

case small

작은 크기

Associated Extensions

extension View
func tooltip(isPresented: Binding<Bool>, mode: Tooltip.ActionMode, position: Tooltip.Position, size: Tooltip.Size, message: String) -> some View

현재 뷰에 툴팁을 표시하는 modifier를 적용합니다.

  • Parameters

    ParameterDescription
    isPresented툴팁의 표시 여부를 제어하는 바인딩
    mode툴팁의 표시 모드
    position툴팁이 표시될 위치 및 화살표 위치
    size툴팁의 크기, 생략하면 기본값으로 .medium 적용
    message툴팁에 표시될 메시지

  • Return Value

    툴팁이 적용된 뷰

© 2026 Wanted Lab, Inc.