도구 설명

아티클
04/22/2024

툴팁 팝업에는 다른 컨트롤 또는 객체에 대한 추가 정보가 있습니다. 툴팁은 사용자가 연관된 컨트롤 위로 포커스를 이동하거나, 누르고 있거나, 포인터를 가리키면 자동으로 표시됩니다. 포인터가 (툴팁 쪽으로 이동하지 않는 한) 사용자가 연관된 컨트롤에서 포커스를 이동하거나, 연관된 컨트롤에 누르기를 중지하거나 포인터를 가져가는 것을 중지하면 도구 설명이 사라집니다.

참고 항목

Windows 11 버전 21H2부터 Ctrl 키를 눌러 툴팁을 해제할 수도 있습니다.

A tooltip

올바른 컨트롤인가요?

툴팁을 사용하여 사용자에게 액션 수행을 요청하기 전에, 컨트롤에 대한 자세한 정보를 표시합니다. 툴팁은 태스크를 완료하려는 사용자에게 고유한 값을 추가하고자 하는 경우에 한정하여 사용해야 합니다. 경험상 동일한 환경의 다른 곳에서 정보를 사용할 수 있는 경우 툴팁은 필요하지 않습니다. 귀중한 툴팁으로 불분명한 액션을 명확히 할 수 있습니다.

툴팁은 언제 사용해야 하나요? 다음 질문을 고려하여 결정하십시오.

마우스로 가리킬 때 정보가 표시되어야 하나요? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 사용자 상호 작용의 결과로만 팁을 표시하고 직접 표시하지 않습니다.
컨트롤에 텍스트 레이블이 있나요? 그렇지 않은 경우, 툴팁을 사용하여 레이블을 제공합니다. 좋은 UX 디자인 사례는 컨트롤 대부분을 인라인으로 레이블을 지정하기 때문에, 이를 위해 툴팁이 필요하지는 않습니다. 아이콘만 표시하는 도구 모음 컨트롤 및 명령 버튼은 툴팁이 필요합니다.
개체에 설명이나 추가 정보를 제공하면 이점이 있나요? 그런 경우라면, 툴팁을 사용합니다. 그러나 텍스트는 보조 작업이어야 합니다. 즉, 기본 태스크에 반드시 필요한 것은 아닙니다. 필수인 경우, UI에 직접 배치하면 사용자가 검색하거나 헌트할 필요가 없습니다.
추가 정보가 오류, 경고 또는 상태 정보인가요? 그런 경우라면, 플라이아웃과 같은 다른 UI 요소를 사용합니다.
사용자가 설명을 조작해야 하나요? 그렇다면, 다른 컨트롤을 사용합니다. 마우스를 이동하면 팁이 사라지기 때문에 사용자가 팁과 상호 작용할 수 없습니다.
사용자가 추가 정보를 인쇄해야 하나요? 그렇다면, 다른 컨트롤을 사용합니다.
도구 설명이 사용자를 짜증나게 하거나 주의를 분산시키나요? 그렇다면, 아무것도 하지 않는 등의 다른 솔루션을 사용하는 것이 좋습니다. 팁이 주의를 산만하게 할 수 있는 경우, 사용자가 팁을 끌 수 있도록 허용합니다.

권장 사항

툴팁을 (전혀 사용하지 않거나) 조금만 사용합니다. 툴팁은 인터럽션입니다. 툴팁은 팝업만큼 집중을 흐트릴 수 있으므로, 큰 도움을 주는 것이 아니라면 사용하지 마세요.
툴팁 텍스트는 간결하게 유지합니다. 툴팁이 짧은 문장과 문장 단위에서 가장 적합합니다. 큰 블록 단위의 텍스트는 부담스러울 수 있으며 사용자가 다 읽기 전에 전에 툴팁이 표시되는 시간이 초과될 수 있습니다.
유용한 보조 설명을 제공하는 툴팁 텍스트를 만듭니다. 툴팁 텍스트의 정보는 유익해야 합니다. 뻔한 내용을 담거나 화면에 이미 있는 내용을 반복하지 마세요. 툴팁 텍스트가 항상 표시되는 것은 아니므로 사용자가 읽을 필요가 없는 추가 정보여야 합니다. 자체 설명 컨트롤 레이블 또는 현재위치 추가 텍스트를 사용하여 중요한 정보를 전달합니다.
이미지 사용이 적절하다면 이미지를 사용합니다. 툴팁에서 이미지를 사용하는 것이 더 좋은 경우도 있습니다. 예를 들어 사용자가 하이퍼링크를 마우스로 가리키면 툴팁을 사용하여 연결된 페이지의 미리 보기를 표시할 수 있습니다.
키보드 액셀러레이터는 기본적으로 도구 설명에 표시됩니다. 고유한 도구 설명을 추가하는 경우 사용할 수 있는 키보드 액셀러레이터에 대한 정보가 포함되어 있는지 확인합니다.
UI에서 이미 보이는 텍스트를 표시하기 위해 툴팁을 사용하지 마세요. 예를 들어 버튼에 이미 있는 동일한 텍스트를 표시하는 툴팁을 버튼에 배치하지 마세요.
툴팁 내에 대화형 컨트롤을 배치하지 마세요.
대화형인 것처럼 보이는 이미지를 툴팁 내에 배치하지 마세요.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

UWP APIs:ToolTip 클래스, ToolTipService 클래스
WinUI 2 갤러리 앱을 열고 작동 중인 툴팁을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

중요 API:ToolTip 클래스, ToolTipService 클래스

WinUI 3 갤러리 앱을 열고 액션 중인 툴팁을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요

ToolTip은 소유자인 다른 UI 요소에 할당되어야 합니다. ToolTipService 클래스는 ToolTip을 표시할 정적 메서드를 제공합니다.

XAML에서 ToolTipService.Tooltip 연결된 속성을 사용하여 소유자에게 ToolTip을 할당합니다.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

코드에서 ToolTipService.SetToolTip 메서드를 사용하여 소유자에게 ToolTip을 할당합니다.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

콘텐츠

모든 개체를 ToolTip의 콘텐츠로 사용할 수 있습니다. ToolTip에서 이미지 사용의 예는 다음과 같습니다.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

배치

기본적으로 ToolTip은 포인터 위 가운데에 표시됩니다. 배치는 앱 창에 의해 제한되지 않으므로 ToolTip은 부분적으로 또는 완전히 앱 창의 범위 밖에 표시될 수 있습니다.

광범위한 조정을 위해 Placement 속성 또는 ToolTipService.Placement 연결된 속성을 사용하여 ToolTip을 포인터의 위, 아래, 왼쪽 또는 오른쪽에 그릴지 여부를 지정합니다. VerticalOffset 또는 HorizontalOffset 속성을 설정하여 포인터와 ToolTip 간 거리를 변경할 수 있습니다. 두 오프셋 값 중 하나만 최종 위치인 VerticalOffset(Placement가 Top 또는 Bottom인 경우), HorizontalOffset(Placement가 Left 또는 Right인 경우)에 영향을 줍니다.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

툴팁이 참조하는 콘텐츠를 가리는 경우 PlacementRect 속성을 사용하여 배치를 정확하게 조정할 수 있습니다. PlacementRect는 ToolTip 위치를 고정하며 ToolTip이 가리지 않을 영역으로도 사용됩니다. 단, 이 경우에는 이 영역 외부에 ToolTip을 그릴 충분한 화면 공간이 있어야 합니다. ToolTip의 소유자에 상대적인 사각형의 원점과 제외 영역의 높이 및 너비를 지정할 수 있습니다. Placement 속성은 ToolTip이 PlacementRect의 위, 아래, 왼쪽 또는 오른쪽에 그려야 하는지 정의합니다.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

샘플 코드 가져오기

WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤을 보여줍니다.

ToolTip 클래스

도구 설명

올바른 컨트롤인가요?

권장 사항

UWP 및 WinUI 2

도구 설명 만들기

콘텐츠

배치

샘플 코드 가져오기

피드백

추가 리소스

도구 설명

올바른 컨트롤인가요?

권장 사항

UWP 및 WinUI 2

도구 설명 만들기

콘텐츠

배치

샘플 코드 가져오기

관련된 문서

피드백

추가 리소스