Keterangan Alat

Tooltip adalah jendela pop-up kecil yang muncul ketika pengguna menjeda penunjuk mouse di atas elemen, seperti pada Button. Saat pengguna memindahkan penunjuk mouse ke elemen yang memiliki tipsalat, jendela yang berisi konten tipsalat (misalnya, konten teks yang menjelaskan fungsi kontrol) muncul selama jumlah waktu tertentu. Jika pengguna memindahkan penunjuk mouse menjauh dari kontrol, jendela menghilang karena konten tipsalat tidak dapat menerima fokus.

Ilustrasi berikut menunjukkan penunjuk mouse yang menunjuk ke tombol TutupButton, yang menampilkan fitur identifikasinya ToolTip.

Tombol Tutup dengan tooltip ditampilkan

Konten tipsalat dapat berisi satu atau beberapa baris teks, gambar, bentuk, atau konten visual lainnya. Anda mendefinisikan tooltip untuk elemen kontrol dengan mengatur konten tooltip pada salah satu properti berikut:

• FrameworkContentElement.ToolTip
• FrameworkElement.ToolTip

Properti mana yang Anda gunakan tergantung pada apakah kontrol yang menentukan tooltip mewarisi dari kelas FrameworkContentElement atau kelas FrameworkElement.

Membuat Tooltip

Contoh berikut menunjukkan cara membuat tooltip sederhana dengan mengatur properti ToolTip untuk kontrol Button menjadi string teks.

<Button ToolTip="Click to submit your information" 
        Click="SubmitCode" Height="20" Width="50">Submit</Button>

Anda juga dapat mendefinisikan tooltip sebagai objek ToolTip. Contoh berikut menggunakan XAML untuk menentukan objek ToolTip sebagai tooltip untuk elemen TextBox. Contoh menentukan ToolTip dengan menetapkan properti FrameworkElement.ToolTip.

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
  <TextBox.ToolTip>
    <ToolTip>
      <DockPanel Width="50" Height="70">
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </DockPanel>
    </ToolTip>
  </TextBox.ToolTip>
</TextBox>

Contoh berikut menggunakan kode untuk menghasilkan ToolTip objek. Contoh membuat ToolTip (tt) dan mengaitkannya dengan Button.

button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);

button = New Button()
button.Content = "Hover over me."
tt = New ToolTip()
tt.Content = "Created with Visual Basic"
button.ToolTip = tt
cv2.Children.Add(button)

Anda juga dapat membuat konten tipsalat yang tidak didefinisikan sebagai ToolTip objek dengan menyertakan konten tipsalat dalam elemen tata letak, seperti DockPanel. Contoh berikut menunjukkan cara mengatur properti ToolTip dari sebuah TextBox ke konten yang dibungkus dalam kontrol DockPanel.

<TextBox>
  ToolTip with image and text
  <TextBox.ToolTip>
       <StackPanel>
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </StackPanel>
  </TextBox.ToolTip>

Sesuaikan Tooltip

Anda dapat menyesuaikan konten tipsalat dengan mengatur properti visual dan menerapkan gaya. Jika Anda menentukan konten tooltip ToolTip sebagai objek, Anda dapat mengatur properti visual dari objek ToolTip. Jika tidak, Anda harus mengatur properti lampiran yang setara pada kelas ToolTipService.

Untuk contoh cara mengatur properti guna menentukan posisi konten tooltip dengan menggunakan properti ToolTip dan ToolTipService, lihat Memposisikan ToolTip.

Properti interval waktu

Kelas ToolTipService menyediakan properti berikut bagi Anda untuk mengatur waktu tampilan tipsalat: InitialShowDelay, BetweenShowDelay, dan ShowDuration.

InitialShowDelay Gunakan properti dan ShowDuration untuk menentukan penundaan, biasanya singkat, sebelum ToolTip muncul dan juga untuk menentukan berapa lama ToolTip tetap terlihat. Untuk informasi selengkapnya, lihat Cara: Menunda tampilan Tooltip.

Properti BetweenShowDelay menentukan apakah tooltip untuk kontrol yang berbeda muncul tanpa penundaan waktu awal saat Anda memindahkan penunjuk mouse dengan cepat di antara kontrol-kontrol tersebut. Untuk informasi selengkapnya tentang properti BetweenShowDelay, lihat Menggunakan Properti BetweenShowDelay.

Contoh berikut menunjukkan cara mengatur properti-properti ini untuk tooltip.

<Ellipse Height="25" Width="50" 
         Fill="Gray" 
         HorizontalAlignment="Left"
         ToolTipService.InitialShowDelay="1000"
         ToolTipService.ShowDuration="7000"
         ToolTipService.BetweenShowDelay="2000">
  <Ellipse.ToolTip>
    <ToolTip Placement="Right" 
             PlacementRectangle="50,0,0,0"
             HorizontalOffset="10" 
             VerticalOffset="20"
             HasDropShadow="false"
             Opened="whenToolTipOpens"
             Closed="whenToolTipCloses"
             >
      <BulletDecorator>
        <BulletDecorator.Bullet>
          <Ellipse Height="10" Width="20" Fill="Blue"/>
        </BulletDecorator.Bullet>
        <TextBlock>Uses the ToolTip Class</TextBlock>
      </BulletDecorator>
    </ToolTip>
  </Ellipse.ToolTip>
</Ellipse>

Gaya dan templat

Anda dapat memodifikasi default ControlTemplate untuk memberi ToolTip kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Apa itu gaya dan templat? dan Cara membuat templat untuk kontrol.

Menyusun Tampilan ToolTip

Anda dapat menata ToolTip dengan menentukan kustom Style. Contoh berikut mendefinisikan Style yang bernama Simple yang menunjukkan cara mengimbangi penempatan ToolTip dan mengubah tampilannya dengan mengatur Background, Foreground, FontSize, dan FontWeight.

<Style TargetType="ToolTip">
  <Setter Property = "HorizontalOffset" Value="10"/>
  <Setter Property = "VerticalOffset" Value="10"/>
  <Setter Property = "Background" Value="LightBlue"/>
  <Setter Property = "Foreground" Value="Purple"/>
  <Setter Property = "FontSize" Value="14"/>
  <Setter Property = "FontWeight" Value="Bold"/>
</Style>

Properti konten

Properti ContentControl.Content adalah properti konten kontrol ToolTip . Anda dapat mengatur properti ini langsung di XAML tanpa secara eksplisit menentukan nama properti.

Bagian

Kontrol ini tidak menentukan bagian templat apa pun.

Keadaan visual

Tabel berikut mencantumkan status visual untuk ToolTip kontrol.

Nama VisualState	Nama VisualStateGroup	Description
Tertutup	OpenStates	Tooltip ditutup serta tidak dapat terlihat.
Buka	OpenStates	Tooltip terbuka dan dapat dilihat.
Sah	StatusValidasi	Kontrol valid dan tidak memiliki kesalahan validasi.
FokusTidakValid	StatusValidasi	Kontrol memiliki kesalahan validasi dan memiliki fokus keyboard.
Tidak valid dan Tidak Difokuskan	StatusValidasi	Kontrol memiliki kesalahan validasi tetapi tidak memiliki fokus keyboard.

Lihat juga

• Popup
• ToolTip
• ToolTipEventArgs
• ToolTipEventHandler
• ToolTipService
• Popup