Bagikan melalui

Tooltip

Tooltip adalah jendela popup yang berisi informasi tambahan tentang kontrol atau objek lainnya. Tipsalat ditampilkan secara otomatis saat pengguna memindahkan fokus ke, menekan dan menahan tombol, atau mengarahkan pointer ke kontrol yang terkait. Tooltip menghilang ketika pengguna mengalihkan fokus dari, melepaskan tekanannya, atau menghentikan penunjuk di atas kontrol terkait (kecuali jika penunjuk bergerak ke arah tooltip).

Catatan

Dimulai dengan Windows 11 versi 21H2, tooltip juga dapat ditutup dengan menekan tombol CTRL.

Tips alat

Apakah ini kontrol yang tepat?

Gunakan tipsalat untuk mengungkapkan info selengkapnya tentang kontrol sebelum meminta pengguna untuk melakukan tindakan. Tooltip harus digunakan dengan hemat, dan hanya ketika mereka menambahkan nilai yang signifikan bagi pengguna yang mencoba menyelesaikan tugas. Salah satu aturan praktisnya adalah bahwa jika informasi tersedia di tempat lain dalam pengalaman yang sama, Anda tidak memerlukan tipsalat. Tooltip yang berguna akan mengklarifikasi tindakan tidak jelas.

Kapan Anda harus menggunakan tooltip? Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

  • Haruskah informasi terlihat saat kursor melayang di atasnya? Jika tidak, gunakan kontrol lain. Tampilkan tips hanya sebagai hasil interaksi pengguna, jangan pernah menampilkannya sendiri.

  • Apakah kontrol memiliki label teks? Jika tidak, gunakan tooltip untuk memberikan label. Ini adalah praktik desain UX yang baik untuk memberikan label pada sebagian besar kontrol secara sebaris dan untuk kontrol tersebut Anda tidak memerlukan tooltip. Kontrol bilah alat dan tombol perintah yang hanya menampilkan ikon memerlukan tooltip.

  • Apakah objek mendapat manfaat dari deskripsi atau info lebih lanjut? Jika demikian, gunakan tooltip. Tetapi teks harus bersifat tambahan — yaitu, tidak penting untuk tugas utama. Jika penting, letakkan langsung di UI sehingga pengguna tidak perlu menemukan atau berburunya.

  • Apakah info tambahan adalah kesalahan, peringatan, atau status? Jika demikian, gunakan elemen UI lain, seperti flyout.

  • Apakah pengguna perlu berinteraksi dengan tip? Jika demikian, gunakan kontrol lain. Pengguna tidak dapat berinteraksi dengan tips karena memindahkan mouse membuatnya menghilang.

  • Apakah pengguna perlu mencetak info tambahan? Jika demikian, gunakan kontrol lain.

  • Apakah pengguna akan menemukan tips yang menyebalkan atau mengganggu? Jika demikian, pertimbangkan untuk menggunakan solusi lain — termasuk tidak melakukan apa pun sama sekali. Jika Anda menggunakan tips di mana mereka mungkin mengganggu, izinkan pengguna untuk menonaktifkannya.

Rekomendasi

  • Gunakan tooltip secara hemat (atau tidak sama sekali). Tooltip adalah gangguan. Tooltip dapat sama mengganggunya dengan pop-up, jadi jangan gunakan kecuali jika mereka menambahkan nilai yang signifikan.
  • Pertahankan teks tooltip ringkas. Tooltip sangat cocok untuk kalimat pendek dan fragmen kalimat. Blok besar teks bisa membingungkan, dan kotak informasi mungkin menghilang sebelum pengguna selesai membaca.
  • Buat teks tipsalat tambahan yang bermanfaat. Teks tipsalat harus informatif. Jangan membuatnya jelas atau hanya ulangi apa yang sudah ada di layar. Karena teks tipsalat tidak selalu terlihat, harus berupa info tambahan yang tidak perlu dibaca pengguna. Komunikasikan info penting menggunakan label kontrol penjelasan mandiri atau teks tambahan di tempat.
  • Gunakan gambar jika sesuai. Terkadang lebih baik menggunakan gambar dalam tipsalat. Misalnya, saat pengguna mengarahkan mouse ke atas hyperlink, Anda bisa menggunakan tipsalat untuk memperlihatkan pratinjau halaman tertaut.
  • Akselerator keyboard ditampilkan dalam tipsalat secara default. Jika Anda menambahkan tooltip Anda sendiri, pastikan tooltip tersebut menyertakan informasi tentang pintasan keyboard yang tersedia.
  • Jangan gunakan tipsalat untuk menampilkan teks yang sudah terlihat di UI. Misalnya, jangan letakkan tipsalat pada tombol yang menunjukkan teks tombol yang sama.
  • Jangan letakkan kontrol interaktif di dalam petunjuk alat.
  • Jangan letakkan gambar yang terlihat interaktif di dalam tooltip.

Buat tooltip

Buka aplikasi Galeri WinUI 3 dan lihat Tooltip beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

A ToolTip harus ditetapkan ke elemen UI lain yang merupakan pemiliknya. Kelas ToolTipService menyediakan metode statis untuk menampilkan ToolTip.

Di XAML, gunakan properti terlampir ToolTipService.Tooltip untuk menetapkan ToolTip kepada pemilik.

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

Dalam kode, gunakan metode ToolTipService.SetToolTip untuk menetapkan ToolTip kepada pemilik.

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

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

Konten

Anda dapat menggunakan objek apa pun sebagai Konten Tooltip. Berikut adalah contoh penggunaan Gambar dalam Tooltip.

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

Penempatan

Secara default, Penjelasan Alat ditampilkan tepat di atas penunjuk. Penempatan tidak dibatasi oleh jendela aplikasi, sehingga TipsAlat mungkin ditampilkan sebagian atau sepenuhnya di luar batas jendela aplikasi.

Untuk penyesuaian luas, gunakan properti Penempatan atau properti terlampir ToolTipService.Placement untuk menentukan apakah ToolTip harus muncul di atas, di bawah, kiri, atau kanan pointer. Anda dapat mengatur properti VerticalOffset atau HorizontalOffset untuk mengubah jarak antara kursor dan ToolTip. Hanya salah satu dari dua nilai offset yang akan memengaruhi posisi akhir - VerticalOffset saat Penempatan adalah Atas atau Bawah, HorizontalOffset saat Penempatan di Kiri atau Kanan.

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

Jika Tooltip mengaburkan konten yang dirujuknya, Anda dapat menyesuaikan penempatannya secara tepat menggunakan properti PlacementRect. PlacementRect menjangkar posisi ToolTip dan juga berfungsi sebagai area yang tidak akan dioklusi oleh ToolTip, asalkan ada cukup ruang layar untuk menampilkan ToolTip di luar area ini. Anda dapat menentukan asal kotak persegi panjang relatif terhadap pemilik ToolTip, serta tinggi dan lebar area pengecualiannya. Properti Penempatan akan menentukan apakah ToolTip harus menampilkan di atas, di bawah, di kiri, atau di kanan "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>

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat radius sudut.