Tooltip'ler, web arayüzlerinin en küçük ama en sorunlu bileşenlerinden biridir. Görünüşte basit bir işlevi vardır: Bir öğenin üzerine gelindiğinde veya odaklanıldığında küçük bir bilgi kutusu gösterir, kullanıcı uzaklaştığında ise gizler. Ancak gerçek dünyada, bu basitlik hızla karmaşıklaşır. Klavye kullanıcıları sekmeyle gezinirken tooltip'i göremez, ekran okuyucular ya hiç duyurmaz ya da iki kez okur, fare hızlı hareket ettiğinde tooltip titreşir, küçük ekranlarda içerikle çakışır, Escape tuşu çalışmaz ve odak kaybolur. Bu sorunlar, geliştiricileri yıllarca JavaScript kütüphanelerine bağımlı kıldı. Ta ki Popover API ortaya çıkana kadar.
Popover API, tarayıcılara tooltip'leri anlama yeteneği kazandıran yeni bir web standardıdır. Artık açma/kapama, klavye etkileşimi, Escape yönetimi ve büyük ölçüde erişilebilirlik, platformun kendisinden geliyor. Bu, daha önce ad-hoc JavaScript ile simüle ettiğimiz tooltip'lerin artık tarayıcı tarafından doğrudan anlaşılması anlamına geliyor. Peki, bir tooltip'i JavaScript kütüphanesi olmadan, yalnızca tarayıcının yerli modelini kullanarak yeniden inşa etmeye kalkışırsanız ne olur? İşte bu yazıda tam olarak bunu deneyimleyeceğiz.
Popover API öncesinde, bir tooltip kütüphanesi kullanmak bir kestirme değil, zorunluluktu. Tarayıcılar, fare, klavye ve yardımcı teknolojilerle uyumlu çalışan yerli bir tooltip kavramına sahip değildi. Doğruluk önemliyse, tek seçenek bir kütüphane kullanmaktı. Klasik pattern her zaman aynıydı: bir tetikleyici öğe, gizli bir tooltip öğesi ve ikisini koordine eden JavaScript. Bu yaklaşım, yaklaşık 60 satır JavaScript ve beş olay dinleyicisi gerektiriyordu. Yeni yaklaşım ise sıfır olay dinleyicisiyle yaklaşık 10 satır bildirimsel HTML kullanıyor.
Kütüphane kullanmanın ardında yatan nedenlerden biri, tooltip'in fare ve klavye girişlerini koordine etme, konumlandırma, viewport kenarlarında çevirme, kaydırma kutularına duyarlılık gibi işlemleri üstlenmesiydi. Ancak asıl sorunlar, görsellikten çok erişilebilirlik davranışında ortaya çıkıyordu. Tooltip bazen geç görünüyor, hızlı sekmeyle geçildiğinde tamamen atlanıyor, Escape tuşu güvenilir bir şekilde çalışmıyor ve odak yönetimi bozuluyordu. Ayrıca, fare ve klavye kullanıcıları arasındaki beklenti farklılıkları, tutarsız bir deneyime yol açıyordu.
Önemli Gelişmeler
Tüm bu sorunlara rağmen, kullanılan kod kötü değildi. Test edilmiş, kütüphane sağlamdı ve mevcut araçlarla mantıklıydı. Temel sorun, kodun kalitesi değil, web platformunun uygun olanaklardan yoksun olmasıydı. Tarayıcı, bu öğenin bir tooltip olduğunu gerçekten bilmiyordu; her şey gelenekler üzerine inşa edilmişti: genel öğeler, olay dinleyicileri, elle yönetilen ARIA ve özel kapatma mantığı. Zamanla, bu yaklaşım kırılgan hale geliyor, küçük değişiklikler regresyonlara yol açıyor ve yeni tooltip'ler ekledikçe karmaşıklık artıyordu.
Popover API'ye geçiş, yeni bir şey deneme arzusundan değil, tooltip bakımından duyulan yorgunluktan kaynaklandı. API, bir öğeyi popover olarak işaretlemek için popover özniteliğini kullanır. Hedeflenen öğe, button veya input gibi etkileşimli bir öğenin popovertarget özniteliği ile popover'a bağlanır. Örneğin, bir yardım butonuna tıklandığında bir tooltip göstermek için şu kod yeterlidir: ve
Popover API'nin sunduğu en büyük avantajlardan biri, bildirimsel yapısı sayesinde JavaScript miktarını önemli ölçüde azaltmasıdır. Artık tooltip'in davranışını kontrol etmek için olay dinleyicileri, durum yönetimi ve manuel ARIA güncellemeleriyle uğraşmak zorunda değilsiniz. Tarayıcı, popover ilişkisini anlar ve tüm etkileşimleri yönetir. Bu, daha az hata, daha iyi erişilebilirlik ve daha temiz bir kod anlamına gelir. Ancak, henüz tüm tarayıcılarda tam desteklenmeyen bazı özellikler olduğunu unutmamak gerek; CanIuse'u takip etmekte fayda var.
Sonuç ve Değerlendirme
Popover API, tooltip oluşturma şeklimizi kökten değiştirme potansiyeline sahip. JavaScript kütüphanelerine olan bağımlılığı azaltarak, daha erişilebilir, daha performanslı ve daha bakımı kolay çözümler sunuyor. Henüz emekleme aşamasında olsa da, büyük tarayıcı desteği ve platformun doğal bir parçası haline gelmesi, onu modern web geliştirmede önemli bir araç yapıyor. Eğer tooltip'lerle uğraşıyorsanız, Popover API'yi denemek için harika bir zaman.
Kaynak: smashingmagazine.com
