도구 설명

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

참고 항목

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 네임스페이스에 있습니다.

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

도구 설명 만들기

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>

샘플 코드 가져오기