Fareyle üzerine gelindiğinde ipucu göster

Web özellikleri: İlgi alanı çağırıcıları Popover popover="hint" Sabit konumlandırma

Kullanıcılar, bağlamlarını tamamen değiştirmeden ek bilgileri görmeyi bekler. Kullanıcı daha fazla bilgi edinmek istediğinde ipucu göstermek, bir terimin tanımını yapmak, yalnızca simge içeren bir düğmenin gerçekleştireceği işlemi açıklamak veya form alanıyla ilgili ek rehberlik sağlamak için yararlı olabilir.

İpucu oluşturuluyor

popover="hint" özelliğini bir <div> veya anlamsal olarak uygun başka bir öğeye ekleyerek gerekli davranışa sahip bir popover oluşturabilirsiniz. Kullanıcı ipucunu açtığında diğer popover="hint" ipuçları gizlenir ancak auto veya manual ipuçları gizlenmez. Ayrıca iç içe yerleştirilmiş ipuçlarını kapatma işlemini de gerçekleştirir.

Ayrıca, kullanıcı popover'ın dışını tıkladığında veya başka bir şekilde odaklandığında popover'ın kapatılmasını sağlayan hafif kapatma davranışı da sağlar.

İpucu öğesinin benzersiz bir değere sahip id özelliği olmalıdır:

<!-- MANDATORY: The tooltip container `<div>` must have a `popover` attribute.
     the value of `"hint"` ensures it can be "light dismissed". -->
<div popover="hint" id="tooltip">Tooltip content</div>

Kullanıcı, fareyle bir <a> veya <button> öğesinin üzerine gelerek ya da bu öğeye odaklanarak ek bilgilere ilgi gösterir. Öğede, ipucunun id özelliğiyle eşleşen bir interestfor özelliği bulunmalıdır.

<!-- The `interestfor` attribute can be applied to a `<button>` element: -->
<button interestfor="tooltip">Tooltip trigger</button>

<!-- The `interestfor` attribute can also be applied to an `<a>` element: -->
<a interestfor="tooltip" href="">Tooltip trigger</a>

Tetikleyicide, tetikleyiciyle etkileşim kurarak ek bilgilere ulaşılabileceğini gösteren görsel bir gösterge bulunmalıdır.

interestfor'da yerleşik erişilebilirlik özellikleri

interestfor kullandığınızda tarayıcı, yardımcı teknoloji bağlantısını sizin için yönetir:

  • Dolaylı semantik: popover="hint" içeren bir hedef, dolaylı olarak minimum tooltip rolü kazanır. role="tooltip" değerini kendiniz AYARLAMAYIN.
  • Dolaylı ilişkilendirme: Tarayıcı, hedef düz metin olduğunda aria-describedby aracılığıyla, hedef etkileşimli içerik barındırdığında ise aria-details aracılığıyla kaynak öğeyi hedefle dolaylı olarak ilişkilendirir. Tetikleyiciye aria-describedby veya aria-details EKLEMEYİN.
  • Etkileşimli içerik: İlişkilendirme gerektiğinde aria-details değerine geçtiğinden, hedef etkileşimli içerik (ör. "ilgi kartı" içindeki bir bağlantı) barındırabilir.

Erişilebilirlik Kısıtlamaları (WCAG 1.4.13)

interestfor yukarıdaki semantiği işlese bile uygulamanızın WCAG 1.4.13'ü (Fareyle Üzerine Gelindiğinde veya Odaklanıldığında Gösterilen İçerik) karşılaması GEREKİR:

  • Kapatılabilir: Kullanıcılar, işaretçiyi hareket ettirmeden veya klavye odağını değiştirmeden (ör. Escape tuşuna basarak) ipucunu kapatabilmelidir. Yerel popover özelliği bu bağlamayı otomatik olarak yönetir.
  • Fareyle üzerine gelinebilir: İşaretçi, ipucu içeriğinin üzerine geldiğinde ipucu kaybolmamalıdır. Bu sayede, büyütme araçlarını kullanan kullanıcılar ipucu metnini güvenli bir şekilde okuyabilir.
  • Kalıcı: İpucu, fareyle üzerine gelme veya odaklanma tetikleyicisi kaldırılana, kullanıcı tarafından açıkça kapatılana ya da içeriği artık geçerli olmayana kadar görünür kalmalıdır.

İpucunu konumlandırma

İpucu, CSS Anchor Positioning kullanılarak konumlandırılır. İpucu interestfor kullanılarak açıldığında tetikleyici öğe, popover için otomatik olarak dolaylı bir sabitleyici olur.

Yerel sabitleme konumlandırmasını destekleyen modern tarayıcılarda, tetikleyicide anchor-name veya ipucunda position-anchor tanımlamanız gerekmez. position-area kullanarak ipucunu doğrudan dolaylı sabitleyicisine göre konumlandırabilir ve position-try-fallbacks ile çakışma çevirmeyi yönetebilirsiniz:

[popover] {
  /* Implicit anchor from interestfor: no anchor-name or position-anchor needed */
  position-area: top;
  position-try-fallbacks: flip-block;
  margin: unset;
}

Yedek stratejiler

İlgi alanı çağırıcıları için yedekler ve tarayıcı desteği

İlgi alanı çağırıcılar, NPM'deki interestfor polyfill paketi kullanılarak koşullu olarak polyfill edilmelidir. CDN kullanmak yerine polyfill'i paketlemeyi tercih edin.

ZORUNLU: HTMLButtonElement.prototype üzerinde interestForElement özelliğini kontrol ederek özellik algılama gerçekleştirin ve polyfill'i yalnızca yerel destek olmadığında yükleyin.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

CSS Polyfill ile İlgili Dikkat Edilmesi Gerekenler

Polyfill kullanılırken CSS API, yerel sözde sınıf ve özellik desteğinin eksikliğini gidermek için biraz değişir:

  • Sözde sınıflar: Polyfill, gerçek :interest-source ve :interest-target sözde sınıflarını tanımlayamadığından bunun yerine .interest-source ve .interest-target sınıflarını uygular. ZORUNLU: Hem yerel hem de polyfill durumlarını desteklemek için bunları :is() ile birleştirin.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • CSS özellikleri: interest-delay, interest-delay-start ve interest-delay-end için polyfill, özel özellikleri tüm tarayıcılarda doğrudan okuyamadığından CSS değişkenlerinin kullanılmasını gerektirir.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}

Popover için yedekler ve tarayıcı desteği

Popover API çoğunlukla progresif geliştirme ile ilgilidir ancak tanımlayıcı davranışlarının (üst katman tanıtımı, hafif kapatma ve popovertarget çağrısı) yalnızca CSS'ye dayalı bir eşdeğeri yoktur. Eski tarayıcılar için polyfill veya polyfill kullanmak istemiyorsanız manuel yedek gerekir.

Polyfill: Eski tarayıcılarda popover özelliğini desteklemek için @oddbird/popover-polyfill öğesini koşullu olarak yükleyin. ZORUNLU: HTMLElement.prototype üzerinde popover özelliğini kontrol ederek özelliği tespit edin ve polyfill'i yalnızca yerel destek eksik olduğunda yükleyin. Koşulsuz olarak YÜKLEMEYİN.

Paketleyici veya içe aktarma eşlemesiyle:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Paketleyici olmadan, <script type="module"> içindeki bir CDN'den içe aktarın:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Stil uyarısı: Polyfill, gerçek :popover-open sözde sınıfını tanımlayamadığı için bunun yerine .\:popover-open sınıfını uygular. ZORUNLU: İkisini :is() veya :where() ile birleştirin. Aksi takdirde, :popover-open içermeyen tarayıcılar kuralın tamamını siler:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Alternatif olarak, polyfill içermeyen eski bir yedek için position: fixed kullanın ve koordinatları getBoundingClientRect() aracılığıyla manuel olarak hesaplayın veya kullanım alanına uygunsa inset: auto ile varsayılan konumlandırmayı kullanın.

popover-polyfill, popover'i destekleyen ancak popover="hint"'yi desteklemeyen tarayıcılarda ipucu davranışını polyfill etmez. Bu tarayıcılarda, odaklanma yoluyla açılan bir ipucu, fareyle üzerine gelme yoluyla açılan ikinci bir ipucu açıldığında açık kalabilir.

Sabit konumlandırma özelliği olmayan tarayıcıları desteklemek için @oddbird/css-anchor-positioning polyfill'i kullanabilirsiniz. Alternatif olarak, yedek bir konum belirtmek için @supports kullanabilirsiniz.

Eski tarayıcı desteği için @oddbird/css-anchor-positioning polyfill'ini kullanırken polyfill'in örtük sabitleyicileri veya popover'larda position-area özelliğini desteklemediğini unutmayın. Tetikleyicide açıkça bir anchor-name ayarlayın, popover'da position-anchor değerini ayarlayın ve position-area yerine anchor() içe yerleştirme işlevlerini kullanarak konumlandırın: 

<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

button[interestfor="tooltip-attrs"] {
  /* MANDATORY: Each trigger and popover pair must have a unique anchor name, referenced by `anchor-name` on the trigger and `position-anchor` on the popover. */
  anchor-name: --tooltip-attrs;
}
#tooltip-attrs {
  position-anchor: --tooltip-attrs;
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions, and not `position-area. */
  top: anchor(bottom);
  left: anchor(right);
  margin: unset;
}