Share via

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 menuju 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 yang 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 bilah alat 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 menggunakannya kecuali mereka menambahkan nilai yang signifikan.
  • Pertahankan teks tipsalat tetap ringkas. Tipsalat sangat cocok untuk kalimat pendek dan fragmen kalimat. Blok teks yang besar dapat 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 mengulangi 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 yang ditautkan.
  • Akselerator keyboard ditampilkan di tipsalat secara default. Jika Anda menambahkan tipsalat Anda sendiri, pastikan tipsalat 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 beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif 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 terlampir ToolTipService.Tooltip 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 bisa 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 yang luas, gunakan properti Penempatan atau properti terlampir ToolTipService.Placement untuk menentukan apakah TipsAlat harus menggambar di atas, di bawah, kiri, atau kanan penunjuk. 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 adalah 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 TipsAlat dan juga berfungsi sebagai area yang tidak akan diapit ToolTip, asalkan ada ruang layar yang cukup untuk menggambar TipsAlat di luar area ini. Anda dapat menentukan asal persegi relatif terhadap pemilik TipsAlat, serta 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>

Dapatkan kode sampel