Pop-up = hint

Keith Cirkel
Mason Freed
Mason Freed
X GitHub

Yayınlanma tarihi: 26 Şubat 2025

Chrome 133, mevcut pop-up özelliğini yeni bir modla geliştirir: popover="hint". Tarayıcı tarafından yönetilen bu mod, ipuçları ve benzer geçici yüzen öğelerin oluşturulmasını kolaylaştıran yeni bir yığın bağlamı sağlar. Tasarım esnekliğini korurken geliştirici çabasını azaltır.

Giriş ve geçmiş

Chrome 114'te kullanıma sunulan Popover API, menüler ve ipuçları gibi erişilebilir yüzen kullanıcı arayüzü oluşturmanıza olanak tanır. popover="auto", Popover API'yi tanıtıyoruz başlıklı makalede açıklandığı gibi, ek komut dosyası yazmanıza gerek kalmadan varsayılan olarak ışık kapatma işlevini ve odak yönetimini sizin için yönetir. Bir popover="auto" pop-up'ı açıldığında, popover="auto" içeren ve ata olmayan diğer tüm pop-up'lar kapatılır. Bu sayede, en mantıklı şeyi yapan ergonomik bir API elde edilir.

Diğer pop-up'ları kapatan pop-up'lar

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

Bu örnekte, popover="auto" yalnızca bir kerede bir pop-up'ın açık olmasına izin verdiğinden pop-up 2 açıldığında pop-up 1 kapanır.

Bu davranış, menüler ve iletişim kutuları için iyi çalışır ancak birden fazla türde yüzen kullanıcı arayüzünün birlikte var olması gerektiğinde sorun oluşturabilir. Örneğin, her ikisi de popover="auto" kullanan bir menü ve ipucu çakışabilir. Bu durumda, ipucu açıldığında menü kapanır. Bu durum nadir görünse de modern uygulama tarzı kullanıcı arayüzünde sıklıkla karşılaşılır. Örneğin, github.com başlığındaki menüler hem menüler hem de ipuçları için pop-up'lar kullanır. Bu sayede, belirli koşullar altında her ikisi de aynı anda görünür olur:

Açık bir menü.
GitHub menüsü.

Bu sorunu çözmenin bir yolu, ipucu öğeleri için popover="manual" kullanmaktır. Bu, komut dosyası kullanarak pop-up'ın tam kontrolünü sağlar. Ancak bunun için yığın davranışını, hafif kapatma işlemini ve odak yönetimini yeniden uygulamanız gerekir. Bunlar tam olarak Popover API'nin üstlenmek üzere tasarlandığı görevlerdir. Bu durum, eksik işlevi sağlamak için API'yi genişletme yollarını araştırmamızı sağladı.

Geliştiricilerle yaptığımız araştırmalar sonucunda, yaygın olarak kullanılan iki yığın bağlamı tespit ettik:

  • Kalıcı kullanıcı arayüzü: Örneğin, menüler ve iletişim kutuları.
  • Geçici kullanıcı arayüzü: Örneğin, fareyle üzerine gelme kartları ve ipuçları.

Her ikisini de karşılamak için popover="hint", popover="auto"'ten farklı ikinci bir yığın sunar. Bu yığın, ipuçları göründüğünde bile menülerin açık kalmasını sağlar. Farklı kullanıcı arayüzü türleri için birden fazla yığın bağlamı sunmak yerine (bu da z-index'ü yeniden icat etmek anlamına gelir) bu yaklaşım, yalnızca iki geniş kategori tanımlayarak işleri basitleştirir: kalıcı kullanıcı arayüzü (auto) ve geçici kullanıcı arayüzü (hint). Bu yaklaşım, esneklik ile pop-up'ı kullanmadan önce karşılaştığınız sorunların yeniden ortaya çıkmasını önleme arasında bir denge kurar.

Yeni değerin davranışı

Hem popover="auto" hem de popover="hint", hafif kapatma özelliğini destekler. Bu özellik, kullanıcı bunların dışında bir yeri tıkladığında veya klavyede Esc tuşuna bastığında otomatik olarak kapanmalarını sağlar. Bu açıdan her iki stil de aynıdır.

Diğer pop-up'ların zorla gizlenmesi söz konusu olduğunda popover="auto", açılan diğer tüm auto ve hint pop-up'larını kapatır. Böylece, aynı anda yalnızca bir pop-up'ın etkin olmasını sağlar (Burada tek istisna, aşağıda açıklanan iç içe yerleştirilmiş pop-up'lardır). Öte yandan popover="hint", yalnızca diğer hint pop-up'ları zorla gizleyerek menülerin ve ipuçlarının açık kalmasına ve birlikte var olmasına olanak tanır.

En büyük farklılıkları yuvalama davranışlarındadır. popover="auto" iç içe yerleştirmeyi destekler. Bu sayede, bir alt pop-up'ın başka bir üst pop-up'ta açık kalmasına izin verilir. popover="hint" özel bir iç içe yerleştirme davranışına sahiptir. Ayrı "gruplar" burada devreye girer. Bir hint pop-up'ı bir auto pop-up'ının içinde olduğunda bağlamsal gruplamayı korumak için auto yığınına katılır. Diğer auto veya hint pop-up'ları zorla gizlenene kadar açık kalır. Bu, ipuçlarının diğer menüleri veya pop-up'ları kesintiye uğratmadığı sezgisel bir davranış sağlar.

Son olarak, çok farklı kullanım alanları için her zaman popover="manual" vardır. Bu bileşen, bu davranışlardan hiçbirini yerleşik olarak içermez. Böylece, ihtiyacınız olan işlevi ve davranışı tam olarak tanımlayabilirsiniz.

popover="auto" popover="hint" popover="manual"
Işığı kapatma Evet Evet Hayır
Zorunlu olarak gizlenenler: Alakasız auto ve hint'ler Alakasız hint Nothing
İç içe yerleştirme: Evet Özel (daha önce açıklandı) Yok: Işık kapatma yok

Fareyle üzerine gelme tetikleyicisi

İpuçları ve fareyle üzerine gelme kartlarının fareyle üzerine gelmeyle tetiklenmesi yaygın bir kullanıcı deneyimi modelidir. Fareyle bir öğenin üzerine bir süre boyunca geldiğinizde bilgi kutusu gösterilir. Şu anda bu davranışın JavaScript aracılığıyla uygulanması gerekir. Örneğin, mouseenter ve mouseleave etkinlikleri için dinleyiciler ekleyerek bu davranışı uygulayabilirsiniz. Ancak, fareyle üzerine gelme tetiklemesini açık bir şekilde yapmanızı sağlayacak başka bir API geliştirilmektedir: Interest Invokers API.

Bu API üzerinde hâlâ çalışmalar devam etmektedir. Ancak genel fikir, birçok öğe türüne interesttarget adlı bir özellik eklemektir. Bu özellik, öğelerin üzerine gelindiğinde tetikleyici davranış sağlar:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

Yukarıdaki HTML'de, fareyle <a> bağlantısının üzerine geldiğinizde my-hovercard pop-up'ı otomatik olarak gösterilir. İşaretçiyi bu öğenin dışına taşıdığınızda pop-up gizlenir. Üstelik JavaScript kullanmadan

Örnekler

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}
İpucu içeren düğme.
Bu özelliği canlı yayında deneyin.

Bu örnekte, fareyle düğmenin üzerine gelindiğinde düğme hakkında daha fazla bilgi sağlayan temel bir ipucu oluşturmak için popover="hint" kullanılır. Fareyle üzerine gelme etkinleştirmesi, mouseenter ve mouseleave için etkinlik işleyiciler tarafından basit 0,5 saniyelik gecikmelerle sağlanır. Bu örnekte ele alınmayan birkaç ayrıntı olduğunu unutmayın:

  1. Fareyle popover'un üzerine gelmek, fareyle tetikleyici öğenin üzerinden uzaklaşmanın popover'u kapatmasını engellemez. Bu nedenle, örneğin pop-up'taki metni kopyalayamaz veya yapıştıramazsınız.
  2. "Debouncing" yoktur: Gecikme süresi dolmadan önce fareyle düğmenin üzerinde kısa bir süre bekletseniz bile düğmenin üzerinde fareyle hızlıca bekletme işlemi sonlandırılsa bile pop-up'ı tetiklemek için düğmenin üzerinde saniyenin küçük bir kısmı boyunca fareyle bekletmek yeterlidir. Bu durumda, ipucu hızlıca açılıp kapanır.
  3. Örneğe hiç erişilemez: Fare kullanmayan kullanıcılar ipucu içeriğine erişemez.

Bu eksiklikler ek JavaScript ile düzeltilebilir. Örneğin, popover'un klavyeyle etkinleştirilmesini desteklemek için focus (veya keydown ve keyup) etkinlik işleyicilerinin) eklenmesi gerekir. İpucu'na erişilebilmesi için doğru şekilde yapılması gerekenlerin açıklaması için Sarah Higley'nin bu mükemmel blog yayınını inceleyin. Bu sorunların tümü (ve daha fazlası) Interest Invokers API tarafından otomatik olarak açık bir şekilde ele alınır.

Daha fazla bilgi

Daha fazla bilgi için özellik açıklamalı makaleyi veya HTML spesifikasyonunu inceleyin.