Bagikan melalui

Tooltip

  • Artikel

Tipsalat adalah popup yang berisi informasi tambahan tentang kontrol atau objek lain. Tipsalat ditampilkan secara otomatis saat pengguna memindahkan fokus ke, menekan dan menahan, atau mengarahkan penunjuk ke kontrol terkait. Tipsalat menghilang ketika pengguna memindahkan fokus dari, berhenti menekan, atau berhenti mengarahkan penunjuk ke kontrol terkait (kecuali penunjuk bergerak ke arah tipsalat).

Catatan

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

Tipsalat

Apakah ini kontrol yang tepat?

Gunakan tipsalat untuk mengungkapkan info selengkapnya tentang kontrol sebelum meminta pengguna untuk melakukan tindakan. Tipsalat harus digunakan dengan hemat, dan hanya ketika mereka menambahkan nilai yang berbeda untuk 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. Tipsalat berharga akan mengklarifikasi tindakan yang tidak jelas.

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

  • Haruskah info terlihat berdasarkan pointer hover? Jika tidak, gunakan kontrol lain. Tampilkan tips hanya sebagai hasil interaksi pengguna, jangan pernah menampilkannya sendiri.

  • Apakah kontrol memiliki label teks? Jika tidak, gunakan tipsalat untuk menyediakan label. Ini adalah praktik desain UX yang baik untuk melabeli sebagian besar kontrol sebaris dan untuk ini Anda tidak memerlukan tipsalat. Kontrol toolbar dan tombol perintah yang hanya menampilkan ikon yang memerlukan tipsalat.

  • Apakah objek mendapat manfaat dari deskripsi atau info lebih lanjut? Jika demikian, gunakan tipsalat. 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 mengganggu 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 tipsalat dengan hemat (atau tidak sama sekali). Tipsalat adalah gangguan. Tipsalat dapat mengalihkan perhatian sebagai pop-up, jadi jangan gunakan kecuali jika mereka menambahkan nilai yang signifikan.
  • Pertahankan ringkas teks tipsalat. Tipsalat sangat cocok untuk kalimat pendek dan fragmen kalimat. Blok besar teks bisa luar biasa dan tipsalat mungkin kehabisan waktu 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 tipsalat Anda sendiri, pastikan alat tersebut menyertakan informasi tentang akselerator 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 tipsalat.
  • Jangan letakkan gambar yang terlihat interaktif di dalam tipsalat.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows 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.

Membuat tipsalat

Buka aplikasi Galeri WinUI 3 dan lihat TipsAlat yang sedang 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

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

Di XAML, gunakan properti toolTipService.Tooltip terlampir untuk menetapkan TipsAlat kepada pemilik.

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

Dalam kode, gunakan metode ToolTipService.SetToolTip untuk menetapkan TipsAlat 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 TipsAlat. Berikut adalah contoh penggunaan Gambar dalam TipsAlat.

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

Penempatan

Secara default, TipsAlat ditampilkan di tengah 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 TipsAlat harus menggambar di atas, di bawah, kiri, atau kanan pointer. Anda dapat mengatur properti VerticalOffset atau HorizontalOffset untuk mengubah jarak antara penunjuk dan TipsAlat. 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 TipsAlat mengaburkan konten yang dirujuknya, Anda dapat menyesuaikan penempatannya dengan tepat menggunakan properti PlacementRect . PlacementRect menjangkar posisi ToolTip dan juga berfungsi sebagai area yang tidak akan di oklude ToolTip, asalkan ada cukup ruang layar untuk menggambar ToolTip di luar area ini. Anda dapat menentukan asal persegi relatif terhadap pemilik ToolTip, dan tinggi dan lebar area pengecualian. Properti Penempatan akan menentukan apakah TipsAlat harus menggambar di atas, di bawah, kiri, atau 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>

Mendapatkan kode sampel

  • Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.