工具提示

  • 發行項

工具提示是一個彈出窗口，其中包含有關另一個控制項或物件的附加資訊。 當使用者將焦點移至關聯控制項、按住關聯控制項或將指標懸停在關聯控制項上時，工具提示會自動顯示。 當使用者將焦點移開、停止按下或停止將指標懸停在關聯控制項上時 (除非指標移向工具提示)，工具提示就會消失。

注意

從 Windows 11 版本 21H2 開始，您也可以按下 CTRL 鍵來關閉工具提示。

A tooltip

這是正確的控制項嗎？

在要求使用者執行操作之前，使用工具提示顯示有關控制項的更多資訊。 工具提示應該謹慎使用，而且只有在為嘗試完成工作的使用者新增相異值時才使用。 其中一個經驗法則是，如果資訊在相同體驗的其他地方可用，則不需要工具提示。 有價值的工具提示將釐清不清楚的操作。

什麼時候該使用工具提示？ 若要決定，請考慮下列問題：

  • 資訊是否應隨著指標的暫留而變得可見？ 如果沒有，請使用另一個控制項。 僅將提示顯示為使用者互動的結果，切勿單獨顯示它們。

  • 控制項是否有文字標籤？ 如果沒有，請使用工具提示提供標籤。 內聯標記大多數控制項是一種很好的 UX 設計實踐，對於這些控制項，您不需要工具提示。 顯示圖示的工具列控制項和命令按鈕只需要工具提示。

  • 說明或進一步的資訊對了解物件有沒有幫助？ 如果是的話，請使用工具提示。 但文本必須是補充性的，也就是說，對於主要任務來說並不是必需的。 如果有必要，請將其直接放在 UI 中，這樣使用者就不必發現或尋找它。

  • 補充資訊是否為錯誤、警告或狀態？ 如果是這樣，請使用另一個 UI 元素，例如飛出視窗。

  • 使用者是否需要與提示互動？ 如果是，請使用另一個控制項。 使用者無法與提示互動，因為移動滑鼠會使提示消失。

  • 使用者是否需要列印補充資訊？ 如果是，請使用另一個控制項。

  • 使用者是否覺得提示會造成困擾或干擾？ 如果是，請考慮使用另一個解決方案，包括完全不執行任何動作。 如果您確實在可能分散注意力的地方使用了提示，請允許使用者將其關閉。

建議

  • 謹慎使用工具提示 (或完全不使用)。 工具提示是中斷。 工具提示可能會像彈出視窗一樣分散注意力，因此除非它們能增加顯著的價值，否則不要使用它們。
  • 保持工具提示文字簡潔。 工具提示非常適合短句子和句子片段。 大量的文字區塊可能會讓人不知所措，並且工具提示可能會在使用者讀完之前逾時。
  • 建立有用的補充工具提示文字。 工具提示文字必須內容豐富。 不要讓它變得明顯，或只是重複螢幕上已有的內容。 由於工具提示文字並不總是可見，因此它應該是用戶不必閱讀的補充資訊。 使用不言自明的控制標籤，或就地補充文字傳達重要訊息。
  • 適當時使用影像。 有時最好在工具提示中使用影像。 例如，當使用者將滑鼠懸停在超連結上時，您可以使用工具提示來顯示連結頁面的預覽。
  • 鍵盤快捷方式預設會顯示在工具提示中。 如果您新增自己的工具提示，請確保它包含有關可用鍵盤加速器的資訊。
  • 不要使用工具提示來顯示 UI 中已可見的文字。 例如，不要在按鈕上放置顯示與按鈕相同文字的工具提示。
  • 不要將互動式控制項放在工具提示內。
  • 不要將看起來像是互動的影像放在工具提示內。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。 WinUI 2.2 或更新版本包含此使用圓角之控制項的新範本。 如需詳細資訊，請參閱圓角半徑。

建立工具提示

開啟 WinUI 3 資源庫應用程式，並查看 ToolTip 運作情形。

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);

Content

您可以使用任何物件作為 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 之間的距離。 兩個位移值當中只有一個值會影響最終位置 - Placement 是 Top 或 Bottom 時為 VerticalOffset，Placement 是 Left 或 Right 時為 HorizontalOffset。

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

如果 ToolTip 遮蓋了它所引用的內容，您可以使用 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>

取得範例程式碼