Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Tooltip

Tooltip genellikle simgelere açıklama eklemek için kullanılır, içeriği genellikle düz metindir, resim veya biçimlendirilmiş metin içermez.

Kullanım

Öznitelik ile Çağır
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Tooltip

Kullanım

Öznitelik ile Çağır

Bu şekilde JavaScript kodu yazmanıza gerek kalmaz. Sadece öğeye mdui-tooltip="options" özniteliğini ekleyerek eklentiyi etkinleştirebilirsiniz.

Örnek

<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Yazdır'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Yazdır', position: 'top'}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Yazdır', delay: 1000}">
  <i class="mdui-icon material-icons">local_printshop</i>
</button>

JavaScript ile Çağır

Bileşeni örnekleme:

// selector, bir CSS seçicisi veya DOM öğesidir
// options, yapılandırma parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Tooltip(selector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`position`	`string`	`auto`	Tooltip konumu. Değer aralığı `auto`, `bottom`, `top`, `left`, `right` içerir. `auto` olduğunda konum otomatik olarak belirlenir. Varsayılan olarak alttadır. Öncelik sırası: `bottom` > `top` > `left` > `right`
`delay`	`int`	`0`	Gecikmeli tetikleme, milisaniye cinsinden.
`content`	`string`		Tooltip içeriği.

Yöntem

Yöntem Adı	Açıklama
`open()`	Tooltip'i aç Her açılışta içeriği değiştirebilmek için yapılandırma parametrelerinin iletilmesine izin verir, örneğin `open({ content: 'yeni içerik' })`. Yapılandırma parametreleri için yukarıdaki parametre listesine bakın.
`close()`	Tooltip'i kapat
`toggle()`	Tooltip durumunu değiştir
`getState()`	Tooltip durumunu döndürür. Toplam dört durum içerir (`opening`, `opened`, `closing`, `closed`).

Olay

Olay Adı	Açıklama	Parametreler
`open.mdui.tooltip`	Açılış animasyonu başladığında olay tetiklenir.	`event._detail.inst`: Örnek
`opened.mdui.tooltip`	Açılış animasyonu bittiğinde olay tetiklenir.
`close.mdui.tooltip`	Kapanış animasyonu başladığında olay tetiklenir.
`closed.mdui.tooltip`	Kapanış animasyonu bittiğinde olay tetiklenir.

Chip

Snackbar