Kullan\u0131c\u0131lar\u0131n\u0131za etkile\u015fimli ve anla\u015f\u0131l\u0131r ipu\u00e7lar\u0131 sunmak, web sitenizin kalitesini ve kullan\u0131labilirli\u011fini art\u0131rman\u0131n en etkili yollar\u0131ndan biridir. Geleneksel tooltip’lerin \u00f6tesine ge\u00e7en modern G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, karma\u015f\u0131k aray\u00fczler ve zengin i\u00e7erikler sunarak kullan\u0131c\u0131lar\u0131n beklentilerini s\u00fcrekli y\u00fckseltiyor. Bu dinamik ortamda, kullan\u0131c\u0131lar\u0131n yeni \u00f6zelliklere adapte olmalar\u0131n\u0131 kolayla\u015ft\u0131rmak ve karma\u015f\u0131k s\u00fcre\u00e7leri basitle\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131yor. \u0130\u015fte tam bu noktada, \u201ckullan\u0131c\u0131 dostu ipu\u00e7lar\u0131\u201d kavram\u0131 devreye giriyor. Kullan\u0131c\u0131lar, bir form alan\u0131n\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131, bir d\u00fc\u011fmeye bas\u0131ld\u0131\u011f\u0131nda ne olaca\u011f\u0131n\u0131 veya bir g\u00f6rselin anlam\u0131n\u0131 an\u0131nda kavrayabilmelidir. Geleneksel yakla\u015f\u0131mlar \u00e7o\u011fu zaman yetersiz kal\u0131rken, HTML\u2019in yeni nesil Popover API\u2019si, \u00f6zellikle Web sitenizde veya uygulaman\u0131zda kullan\u0131c\u0131lar\u0131n bir g\u00f6revi tamamlarken kafalar\u0131n\u0131n kar\u0131\u015fmas\u0131, etkile\u015fimden uzakla\u015fmalar\u0131na ve hatta siteyi terk etmelerine neden olabilir. Karma\u015f\u0131k formlar, yeni kullan\u0131c\u0131lar i\u00e7in bilinmezliklerle dolu d\u00fc\u011fmeler veya veri giri\u015f alanlar\u0131, \u00e7o\u011fu zaman kullan\u0131c\u0131lar\u0131n geri ad\u0131m atmas\u0131na sebep olur. Geleneksel olarak, bu t\u00fcr bilgilendirmeler i\u00e7in genellikle JavaScript k\u00fct\u00fcphaneleriyle olu\u015fturulan “tooltip”ler veya \u00f6zel modal pencereler kullan\u0131l\u0131rd\u0131. Ancak bu yakla\u015f\u0131mlar\u0131n kendi i\u00e7inde baz\u0131 s\u0131n\u0131rlamalar\u0131 bulunuyordu. \u00d6rne\u011fin, tooltip’ler genellikle sadece k\u0131sa metinler i\u00e7in uygunken, modal pencereler sayfa ak\u0131\u015f\u0131n\u0131 kesintiye u\u011fratarak kullan\u0131c\u0131 deneyimini bozabiliyordu.<\/p>\n Dahas\u0131, Popover API, modern web geli\u015ftiricilerine sunulan, taray\u0131c\u0131 taraf\u0131ndan y\u00f6netilen, ba\u011flam i\u00e7i i\u00e7erik kutucuklar\u0131 olu\u015fturmay\u0131 sa\u011flayan devrim niteli\u011finde bir web standard\u0131d\u0131r. Temelinde, HTML \u00f6\u011felerinin di\u011fer i\u00e7eriklerin \u00fczerinde, genellikle bir tetikleyici \u00f6\u011feyle ili\u015fkili olarak g\u00f6r\u00fcnmesini sa\u011flar. Geleneksel tooltip’ler genellikle fareyle \u00fczerine gelindi\u011finde k\u0131sa bir metin g\u00f6steren, JavaScript veya CSS ile uygulanan basit \u00f6\u011felerdir. Ancak Popover API’nin getirdi\u011fi yenilikler, tooltip’lerin sundu\u011fu basitli\u011fin \u00e7ok \u00f6tesine ge\u00e7er. Popover’lar, sadece metin de\u011fil, her t\u00fcrl\u00fc HTML i\u00e7eri\u011fini (d\u00fc\u011fmeler, resimler, form giri\u015fleri vb.) bar\u0131nd\u0131rabilir ve \u00e7ok daha zengin etkile\u015fimlere olanak tan\u0131r. Bir Popover, bir d\u00fc\u011fmeye t\u0131klayarak veya bir alana odaklanarak a\u00e7\u0131labilir ve Esc tu\u015funa basarak veya d\u0131\u015far\u0131 t\u0131klayarak kapanabilir, bu da klavye ve fare kullan\u0131c\u0131lar\u0131 i\u00e7in geli\u015fmi\u015f eri\u015filebilirlik anlam\u0131na gelir.<\/p>\n A\u015fa\u011f\u0131daki tablo, geleneksel tooltip’ler ile G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, Temel Popover Yap\u0131s\u0131 ve \u0130lk Ad\u0131mlar:<\/strong><\/p>\n Bir popover olu\u015fturman\u0131n ilk ad\u0131m\u0131, i\u00e7eri\u011fini tan\u0131mlamakt\u0131r. Bu i\u00e7erik genellikle bir popover=hint<\/code> \u00f6zelli\u011fiyle kullan\u0131c\u0131 deneyimini nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrebilece\u011finizi bu makalede ke\u015ffedin.<\/p>\npopover=hint<\/code> niteli\u011fiyle bu ihtiyaca modern, eri\u015filebilir ve taray\u0131c\u0131 yerelinde g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunuyor.<\/p>\npopover=hint<\/code> \u00f6zelli\u011fi, bu sorunlara zarif ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm getiriyor. HTML’e do\u011frudan entegre edilmi\u015f bu yeni API, taray\u0131c\u0131 taraf\u0131ndan yerel olarak y\u00f6netilen, y\u00fcksek performansl\u0131 ve eri\u015filebilir ipu\u00e7lar\u0131 olu\u015fturman\u0131za olanak tan\u0131r. Art\u0131k \u00f6zel JavaScript k\u00fct\u00fcphanelerine veya karma\u015f\u0131k CSS hilelerine ihtiya\u00e7 duymadan, sadece birka\u00e7 HTML niteli\u011fiyle zengin i\u00e7erikli, etkile\u015fimli ve ba\u011flama duyarl\u0131 ipu\u00e7lar\u0131 sunabilirsiniz. Bu sayede, web sitenizin kullan\u0131c\u0131 aray\u00fcz\u00fc daha a\u00e7\u0131klay\u0131c\u0131, daha sezgisel ve \u00e7ok daha davetkar hale gelir. Kullan\u0131c\u0131lar, ihtiya\u00e7 duyduklar\u0131 bilgiyi do\u011fru zamanda ve do\u011fru yerde alarak i\u015flemleri daha g\u00fcvenle tamamlayabilir, bu da genel memnuniyetlerini ve sitenizle etkile\u015fimlerini art\u0131r\u0131r.<\/p>\npopover=hint<\/code> ile olu\u015fturulan ipu\u00e7lar\u0131, klavye navigasyonu ve ekran okuyucular gibi eri\u015filebilirlik ara\u00e7lar\u0131yla do\u011fal bir uyum i\u00e7indedir. Bu durum, web sitenizin daha geni\u015f bir kullan\u0131c\u0131 kitlesi taraf\u0131ndan kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar, engelli bireyler i\u00e7in de kesintisiz bir deneyim sunar. Dolay\u0131s\u0131yla, bu teknoloji sadece estetik bir iyile\u015ftirme de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini temellerinden g\u00fc\u00e7lendiren, herkes i\u00e7in kapsay\u0131c\u0131 bir web ortam\u0131 yarat\u0131lmas\u0131na katk\u0131da bulunan stratejik bir ara\u00e7t\u0131r. Kullan\u0131c\u0131lar\u0131n\u0131z\u0131n sorular\u0131n\u0131 daha onlar sormadan yan\u0131tlayarak, onlara de\u011fer verdi\u011finizi g\u00f6sterir ve dijital yolculuklar\u0131n\u0131 sorunsuz hale getirirsiniz.<\/p>\nPopover API Nedir ve Geleneksel Tooltip’lerden Fark\u0131 Ne?<\/h2>\n
popover=hint<\/code> niteli\u011fi ise, bu API’nin \u00f6zel bir kullan\u0131m senaryosudur; \u00f6zellikle kullan\u0131c\u0131ya bilgi sa\u011flamak, bir terimi a\u00e7\u0131klamak veya bir eylemi y\u00f6nlendirmek i\u00e7in tasarlanm\u0131\u015f k\u00fc\u00e7\u00fck, ge\u00e7ici ipu\u00e7lar\u0131 olu\u015fturmak \u00fczere tasarlanm\u0131\u015ft\u0131r. Bu, geleneksel “tooltip”lerin geli\u015fmi\u015f, taray\u0131c\u0131 yerelinde uygulanm\u0131\u015f versiyonu olarak d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\npopover=hint<\/code> aras\u0131ndaki temel farklar\u0131 daha net bir \u015fekilde ortaya koymaktad\u0131r:<\/p>\n\n\n
\n \n\u00d6zellik<\/th>\n Geleneksel Tooltip (\u00d6zel Uygulama)<\/th>\n Popover API (Hint)<\/th>\n<\/tr>\n<\/thead>\n \n \u0130\u00e7erik Deste\u011fi<\/td>\n Genellikle sadece k\u0131sa metinler<\/td>\n Metin, resim, form, d\u00fc\u011fme gibi her t\u00fcrl\u00fc HTML i\u00e7eri\u011fi<\/td>\n<\/tr>\n \n Etkile\u015fim Mekanizmas\u0131<\/td>\n \u00c7o\u011funlukla fare \u00fczerine gelme ( hover<\/code>)<\/td>\nT\u0131klama, odaklanma, klavye (Enter\/Space), d\u0131\u015far\u0131 t\u0131klama<\/td>\n<\/tr>\n \n Eri\u015filebilirlik<\/td>\n \u00c7o\u011funlukla ek ARIA nitelikleri gerektirir, k\u0131s\u0131tl\u0131d\u0131r<\/td>\n Taray\u0131c\u0131 yerelinde WAI-ARIA uyumlu, klavye ile tam eri\u015fim<\/td>\n<\/tr>\n \n Kontrol ve Y\u00f6netim<\/td>\n JavaScript k\u00fct\u00fcphaneleri veya karma\u015f\u0131k CSS ile manuel y\u00f6netim<\/td>\n Taray\u0131c\u0131 taraf\u0131ndan yerel olarak otomatik konumland\u0131rma ve ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi<\/td>\n<\/tr>\n \n Performans<\/td>\n K\u00fct\u00fcphane boyutuna ve JS y\u00fck\u00fcne ba\u011fl\u0131 olarak de\u011fi\u015fir<\/td>\n Taray\u0131c\u0131 yerelinde \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in genellikle daha h\u0131zl\u0131 ve hafif<\/td>\n<\/tr>\n \n Taray\u0131c\u0131 Deste\u011fi<\/td>\n Evrensel (JS\/CSS’e ba\u011fl\u0131)<\/td>\n Modern taray\u0131c\u0131larda (Chrome, Edge, Safari) yerel destek, Firefox geli\u015ftiriliyor<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n popover=hint<\/code> sadece bir g\u00f6rsel iyile\u015ftirme arac\u0131 de\u011fil, ayn\u0131 zamanda performans, eri\u015filebilirlik ve geli\u015ftirici kolayl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sunan kapsaml\u0131 bir \u00e7\u00f6z\u00fcmd\u00fcr. Geli\u015ftiriciler, art\u0131k k\u00fct\u00fcphane ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 azaltabilir ve taray\u0131c\u0131n\u0131n yerel yeteneklerinden faydalanarak daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir kullan\u0131c\u0131 aray\u00fczleri olu\u015fturabilirler. Bu yeni standart, web uygulamalar\u0131na daha zengin, daha etkile\u015fimli ve her kullan\u0131c\u0131 i\u00e7in daha anla\u015f\u0131l\u0131r bir deneyim sunman\u0131n kap\u0131lar\u0131n\u0131 aral\u0131yor.<\/p>\nHTML’de Popover=Hint Olu\u015fturma ve \u00d6zelle\u015ftirme Rehberi: Ad\u0131m Ad\u0131m<\/h2>\n
popover=hint<\/code> \u00f6zelli\u011fini kullanmak, san\u0131ld\u0131\u011f\u0131ndan \u00e7ok daha basittir. Temelde, bir popover i\u00e7eri\u011fi ve bu popover’\u0131 tetikleyecek bir \u00f6\u011feye ihtiyac\u0131n\u0131z vard\u0131r. Taray\u0131c\u0131, Popover API sayesinde bu iki \u00f6\u011fe aras\u0131ndaki ili\u015fkiyi otomatik olarak kurar ve y\u00f6netir. \u015eimdi, ad\u0131m ad\u0131m nas\u0131l bir popover olu\u015fturaca\u011f\u0131m\u0131za ve onu nas\u0131l \u00f6zelle\u015ftirece\u011fimize bakal\u0131m.<\/p>\n<\/p>\nid<\/code> niteli\u011fine sahip olmal\u0131d\u0131r. Ard\u0131ndan, bu \u00f6\u011feye popover=\"hint\"<\/code> niteli\u011fini ekleyerek taray\u0131c\u0131ya bunun bir ipucu ama\u00e7l\u0131 popover oldu\u011funu belirtiriz. Tetikleyici \u00f6\u011fe ise, bu popover’\u0131 a\u00e7acak olan herhangi bir interaktif \u00f6\u011fe (genellikle bir