Tooltip'ler, web arayüzlerinde en küçük UI sorunlarından biri gibi görünür. Küçüktürler ve genellikle gizlidirler. Bir tooltip'in nasıl yapılacağı sorulduğunda, geleneksel yanıt neredeyse her zaman bir JavaScript kütüphanesi kullanmaktır. Uzun süre bu mantıklı bir tavsiyeydi. Ancak Popover API ile bu durum değişiyor: Tooltip'ler artık tarayıcının anladığı yerli bir öğe haline geliyor. Açma/kapama, klavye etkileşimi, Escape tuşu yönetimi ve erişilebilirliğin büyük kısmı artık platform tarafından sağlanıyor, özel JavaScript kodlarıyla değil.
Eski yöntemlerle tooltip oluşturmak, yaklaşık 60 satır JavaScript ve beş olay dinleyicisi gerektiriyordu. Yeni Popover API ise yalnızca 10 satır bildirimsel HTML ile sıfır olay dinleyicisi kullanarak aynı işlevselliği sunuyor. Kütüphaneler konumlandırma, görünüm kenarlarında döndürme, olay koordinasyonu ve kaydırma kapsayıcıları gibi karmaşık işleri hallederken, Popover API bu sorumlulukları tarayıcıya devrediyor. Bu sayede geliştiriciler, erişilebilirlik ve kullanıcı deneyimi açısından daha tutarlı sonuçlar elde ediyor.
Popover API'nin en büyük avantajı, tarayıcının tooltip'i yerli olarak anlamasıdır. Eskiden ARIA özniteliklerini elle senkronize etmek, odak ve fare olaylarını ayrı ayrı yönetmek ve Escape tuşuyla kapatma gibi davranışları özel kodlarla sağlamak gerekiyordu. Yeni API ile tüm bunlar otomatikleşiyor. Klavye kullanıcıları için tooltip'ler artık atlanmıyor, ekran okuyucular çift bildirim yapmıyor ve tooltip'ler hızlı fare hareketlerinde titremiyor.
Detaylar ve Etkileri
Popover API henüz geliştirme aşamasında olsa da, tarayıcı desteği oldukça iyi. Caniuse üzerinden güncel durumu takip etmekte fayda var. Eğer hala tooltip'ler için kütüphane kullanıyorsanız, Popover API'yi denemenin tam zamanı. Küçük bir UI öğesini tarayıcının yerli modeliyle yeniden inşa etmek, hem bakım yükünü azaltır hem de kullanıcı deneyimini iyileştirir. Bu yazı, Popover API ile tooltip geliştirmeye başlamak için bir rehber niteliğindedir.
