Tooltip

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

Design

Web

iOS

Android

WantedTooltip

커스텀 Tooltip 컴포넌트입니다. 앵커 요소 주변에 텍스트를 표시하며, 화면 경계를 고려하여 자동으로 위치를 조정합니다. Arrow를 통해 앵커와의 연관성을 시각적으로 표현합니다.

val tooltipState = rememberTooltipState()

WantedTooltip(
    modifier = Modifier.padding(16.dp),
    tooltipState = tooltipState,
    text = "이것은 도움말 텍스트입니다.",
    size = WantedTooltipSize.Medium,
    align = WantedTooltipAlign.Center
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_help),
        contentDescription = "도움말",
        modifier = Modifier.clickable { tooltipState.show() }
    )
}

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`tooltipState`	WantedTooltipState	Tooltip 의 표시/숨김 상태를 관리하는 객체입니다.
`text`	String	Tooltip 에 표시할 텍스트입니다. 최대 3줄까지 표시되며, 초과 시 말줄임표로 처리됩니다.
`size`	WantedTooltipSize	Tooltip 의 크기입니다.
`align`	WantedTooltipAlign	앵커 요소에 대한 Tooltip 의 정렬 방식입니다.
`always`	Boolean	외부 클릭으로 닫히지 않도록 할지 여부입니다.
`positionTop`	Boolean	Tooltip 을 위쪽에 표시할지 여부입니다.
`content`	(@Composable () -> Unit)	Tooltip 을 트리거하는 앵커 콘텐츠 슬롯입니다.

Advanced

rememberTooltipState

Tooltip 상태를 관리하는 State 객체를 생성하고 관리합니다.

val tooltipState = rememberTooltipState(initialVisible = false)

// Tooltip  표시
tooltipState.show()

// Tooltip  숨김
tooltipState.dismiss()

Parameters

이름	타입	설명
`initialVisible`	Boolean	초기 표시 상태입니다.

Return

타입	설명
WantedTooltipState	Tooltip 상태를 관리하는 객체입니다.

WantedTooltipState

Tooltip의 표시/숨김 상태를 관리하는 인터페이스입니다. Tooltip을 표시하거나 숨기기 위한 메서드를 제공하며, 현재 표시 상태를 확인할 수 있습니다.

Enum

WantedTooltipSize

값	설명
`Small`	작은 크기의 Tooltip 입니다.
`Medium`	중간 크기의 Tooltip 입니다.

WantedTooltipAlign

값	설명
`Left`	왼쪽 정렬입니다.
`Center`	중앙 정렬입니다.
`Right`	오른쪽 정렬입니다.