TooltipTooltip

Tooltip, belirli bir öğeye ek metin ipucu veya bağlam bilgisi sağlamak için kullanılır. Bu sayede kullanıcıların öğenin işlevini veya amacını daha iyi anlamasına yardımcı olur.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/tooltip.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

import type { Tooltip } from 'mdui/components/tooltip.js';

Kullanım örneği:

buton

<mdui-tooltip content="Düz tooltip">
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Örnekler

Düz metin tooltip

Varsayılan olarak düz metin tooltip'tir. Tooltip içeriğini content özniteliği aracılığıyla ayarlayabilirsiniz.

buton

<mdui-tooltip content="Düz tooltip">
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Kaynak Kodu

Tooltip içeriğini content slot'u aracılığıyla da ayarlayabilirsiniz.

buton

başlık

içerik

<mdui-tooltip>
  <mdui-button>buton</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">başlık</div>
    <div>içerik</div>
  </div>
</mdui-tooltip>

Kaynak Kodu

Zengin tooltip

variant özniteliğini rich olarak ayarlayarak zengin tooltip oluşturabilirsiniz. Tooltip'in başlığını headline özniteliği, içeriğini content özniteliği aracılığıyla ayarlayabilirsiniz.

buton

<mdui-tooltip
  variant="rich"
  headline="Zengin tooltip"
  content="Zengin tooltipler, kullanıcının odağını gerektiren belirli bir özellik öğesine dikkat çeker. Birden fazla satır bilgilendirici metni destekler."
>
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Kaynak Kodu

Tooltip'in başlığını ve içeriğini headline, content slot'ları aracılığıyla da ayarlayabilirsiniz. Tooltip'in işlem butonunu action slot'u aracılığıyla ayarlayabilirsiniz.

buton

Zengin tooltip

Zengin tooltipler, kullanıcının odağını gerektiren belirli bir özellik öğesine dikkat çeker. Birden fazla satır bilgilendirici metni destekler.

İşlem

<mdui-tooltip variant="rich">
  <mdui-button>buton</mdui-button>
  <div slot="headline">Zengin tooltip</div>
  <div slot="content">Zengin tooltipler, kullanıcının odağını gerektiren belirli bir özellik öğesine dikkat çeker. Birden fazla satır bilgilendirici metni destekler.</div>
  <mdui-button slot="action" variant="text">İşlem</mdui-button>
</mdui-tooltip>

Kaynak Kodu

Konum

Tooltip'in konumunu placement özniteliği aracılığıyla ayarlayabilirsiniz.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="üst-sol">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="üst-başlangıç">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="üst">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="üst-son">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="üst-sağ">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="sol-üst">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="sağ-üst">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="sol">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="sağ">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="sol-alt">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="sağ-alt">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="alt-sol">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="alt-başlangıç">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="alt">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="alt-son">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="alt-sağ">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Kaynak Kodu

Tetikleme Şekli

Tooltip'in tetikleme şeklini trigger özniteliği aracılığıyla ayarlayabilirsiniz.

buton

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Kaynak Kodu

Açma/Kapama Gecikmesi

Tetikleme şekli hover olduğunda, tooltip'in açma ve kapama gecikmesini open-delay ve close-delay öznitelikleri aracılığıyla ayarlayabilirsiniz. Birim milisaniyedir.

buton

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Kaynak Kodu

Devre Dışı Durumu

disabled özniteliğini ekleyerek tooltip'i devre dışı bırakabilirsiniz.

buton

<mdui-tooltip disabled content="tooltip">
  <mdui-button>buton</mdui-button>
</mdui-tooltip>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Tooltip'in şekli. Varsayılan `plain`'dir. Olası değerler: `plain`: Düz metin, basit tek satırlı metinler için uygundur `rich`: Zengin metin, başlık, gövde ve işlem butonları içerebilir
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Tooltip'in konumu. Varsayılan `auto`'dur. Olası değerler: `auto`: Konumu otomatik olarak belirler. `variant="plain"` olduğunda öncelikle `top` kullanılır; `variant="rich"` olduğunda öncelikle `bottom-right` kullanılır `top-left`: Sol üstte `top-start`: Üstte, sola hizalı `top`: Üstte, ortalanmış `top-end`: Üstte, sağa hizalı `top-right`: Sağ üstte `bottom-left`: Sol altta `bottom-start`: Altta, sola hizalı `bottom`: Altta, ortalanmış `bottom-end`: Altta, sağa hizalı `bottom-right`: Sağ altta `left-start`: Solda, üste hizalı `left`: Solda, ortalanmış `left-end`: Solda, alta hizalı `right-start`: Sağda, üste hizalı `right`: Sağda, ortalanmış `right-end`: Sağda, alta hizalı
`open-delay`	`openDelay`	`number`	`150`
Fareyle üzerine gelerek gösterim gecikmesi, milisaniye cinsinden.
`close-delay`	`closeDelay`	`number`	`150`
Fareyle üzerine gelerek gizleme gecikmesi, milisaniye cinsinden.
`headline`	`headline`	`string`	-
Tooltip'in başlığı. Yalnızca `variant="rich"` olduğunda kullanılabilir. `slot="headline"` ile de ayarlanabilir.
`content`	`content`	`string`	-
Tooltip'in içeriği. `slot="content"` ile de ayarlanabilir.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Tetikleme şekli. Birden fazla değer boşlukla ayrılarak desteklenir. Olası değerler: `click`: Tıklama ile tetiklenir `hover`: Fareyle üzerine gelme ile tetiklenir `focus`: Odaklanma ile tetiklenir `manual`: Yalnızca programlama yoluyla açılıp kapatılabilir, başka tetikleme şekli belirtilemez
`disabled`	`disabled`	`boolean`	`false`
Tooltip'in devre dışı olup olmadığı.
`open`	`open`	`boolean`	`false`
Tooltip'in gösterilip gösterilmeyeceği.

Olaylar

Ad
`open`
Tooltip gösterilmeye başladığında tetiklenir. `event.preventDefault()` çağrılarak tooltip'in açılması engellenebilir.
`opened`
Tooltip gösterim animasyonu tamamlandığında tetiklenir.
`close`
Tooltip gizlenmeye başladığında tetiklenir. `event.preventDefault()` çağrılarak tooltip'in kapanması engellenebilir.
`closed`
Tooltip gizleme animasyonu tamamlandığında tetiklenir.

Slots

Ad
Varsayılan
Tooltip'in tetiklediği hedef öğe, yalnızca `default` slotundaki ilk öğe hedef öğe olarak kullanılır.
`headline`
Tooltip'in başlığı, yalnızca `variant="rich"` olduğunda bu slot geçerlidir.
`content`
Tooltip'in içeriği, HTML içerebilir. Yalnızca düz metin içeriyorsa, bunun yerine `content` özelliği kullanılabilir.
`action`
Tooltip'in altındaki buton, yalnızca `variant="rich"` olduğunda bu slot geçerlidir.

CSS Parts

Ad
`popup`
Tooltip'in kabı.
`headline`
Başlık.
`content`
Gövde.
`action`
İşlem butonu.

CSS Custom Property

Ad
`--shape-corner-plain`
`variant="plain"` olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--shape-corner-rich`
`variant="rich"` olduğunda bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--z-index`
Bileşenin CSS `z-index` değeri.

Önceki Bölüm

TextField Metin Alanı

Sonraki Bölüm

TopAppBar Üst Uygulama Çubuğu