HTML Popover API: menyu, maslahat va panellarni JavaScript'siz ochish

Qisqacha: popover atributi istalgan elementni sahifa ustida ochiladigan kichik oynaga aylantiradi: menyu, maslahat yoki panel. Uni ochadigan tugmaga popovertarget yoziladi — JavaScript kerak emas. popover modal emas: orqadagi sahifa ishlayveradi, tashqariga bosish yoki Esc esa oynani yopadi. 2025-yil yanvaridan u Baseline: hamma asosiy brauzerlarda ishlaydi.

Bu darsda

• popover va popovertarget bilan JavaScript'siz ochiladigan oyna yasay olasiz.
• popovertargetaction bilan alohida "ochish" va "yopish" tugmalarini yozasiz.
• auto, manual va hint turlarini farqlaysiz va Baseline holatini bilasiz.
• Light dismiss va top layer nima ekanini tushuntira olasiz.
• Qachon popover, qachon dialog, qachon oddiy title kerakligini tanlay olasiz.

Oldin bilishingiz kerak: dialog: native modal oyna, details va summary, Tugmalar va yuborish.

1. Nega bu kerak?

O'tgan darsda dialog bilan tasdiq oynasi yasadik. U kuchli, lekin "og'ir": sahifani to'sadi va javob kutadi. Ko'p holatda esa bunday qattiqlik kerak emas.

«Bahor» sahifasida uchta shunday joy bor:

• "Ish vaqti" tugmasi — bosilganda kichik jadval chiqsin. Mehmon uni ko'rib, sahifani o'qishda davom etsin.
• "?" belgisi "Bron narxi" yonida — "bron bepul" degan qisqa izoh.
• "Bugungi aksiyalar" paneli — ochilgan holda turib, mehmon menyuni aylantirsa ham yopilmasin.

Uchalasi ham sahifa ustida chiqadi, lekin uni to'smaydi. Ilgari ular uchun JavaScript kutubxonalari ishlatilardi. Endi bitta HTML atributi yetarli: popover.

2. Birinchi popover

2.1 Ikki atribut

Popover (qalqib chiquvchi oyna) — tugma bosilganda sahifa ustida paydo bo'ladigan va osongina yopiladigan element. Hayotdan o'xshatish: choyxonadagi menyu kartochkasi. Ofitsiant uni stolga qo'yadi, siz ko'rib chiqasiz, lekin suhbatingiz to'xtamaydi. Chetga surib qo'yishingiz bilan u "yopiladi".

<button type="button" popovertarget="ish-vaqti">
  Ish vaqti
</button>

<div id="ish-vaqti" popover>
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
</div>

• popover — elementni popover qiladi. Shundan keyin u boshida yashirin.
• popovertarget="ish-vaqti" — tugma qaysi popover'ni boshqarishi: uning id si. dialog darsidagi commandfor ga o'xshash.

Tugmani bosing — matn chiqadi. Yana bosing — yashirinadi. Yozganimiz shu, xolos.

2.2 Brauzer nimalarni o'zi qiladi

Tugma bosilganda brauzer:

1. Popover'ni top layer ga chiqaradi — dialog darsida ko'rgan, hamma narsaning ustidagi qavat.
2. Sukut bo'yicha uni ekran o'rtasida, ingichka ramka bilan ko'rsatadi. Uni tugma yoniga joylash — CSS ishi, keyinroq.
3. Ekran o'quvchiga tugmaning holatini aytadi: "Ish vaqti, tugma, yoyilgan".
4. Tab tartibini to'g'rilaydi: tugmadan keyingi Tab popover ichiga kiradi.

Popover qayerda yozilganidan qat'i nazar — sahifaning oxirida yoki boshida — u ochilganda baribir top layer'da chiqadi.

2.3 Qaysi elementga popover yozsa bo'ladi

Istalgan elementga: div, ul, nav, aside, p. Mazmuniga qarab semantik tegni tanlang — Semantik HTML darsidagi qoida. Menyu ro'yxat bo'lsa — ul, qo'shimcha izoh bo'lsa — aside.

Tugma esa faqat button (yoki input type="button") bo'ladi. a yoki div ga popovertarget yozsangiz, u ishlamaydi.

2.4 Brauzer holati

iPhone'dagi Safari'da tashqariga bosib yopish 18.3-versiyada tuzatilgan. Shuning uchun Baseline sanasi — 2025-yil yanvar, holati — Newly available. "Widely" bo'lishiga taxminan 2027-yil iyulgacha vaqt bor. Bu 2026-yil sentabr holati — MDN'da qayta tekshiring.

Eski brauzerda nima bo'ladi? popover ni tanimagan brauzer elementni oddiy blokdek doim ko'rsatadi, tugma esa hech narsa qilmaydi. Ma'lumot yo'qolmaydi — faqat sahifada ochiq turadi. Bu qabul qilinadigan zaxira.

Tekshirib ko'ring: Sahifada <div id="aksiya" popover> bor, lekin unga hech qaysi tugma popovertarget="aksiya" bilan ishora qilmaydi. Mehmon bu div ni ko'radimi?

3. popovertargetaction: ochish va yopish alohida

popovertarget li tugma sukut bo'yicha almashtiradi (toggle): yopiq bo'lsa ochadi, ochiq bo'lsa yopadi. Ba'zan esa tugma faqat bitta ish qilishi kerak. Masalan, popover ichidagi "Yopish" tugmasi:

<button type="button" popovertarget="ish-vaqti"
        popovertargetaction="show">
  Ish vaqti
</button>

<div id="ish-vaqti" popover>
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
  <button type="button" popovertarget="ish-vaqti"
          popovertargetaction="hide">
    Yopish
  </button>
</div>

Bo'sh joyni to'ldiring: popover ichidagi "Yopish" tugmasida popovertargetaction qiymati qanday bo'ladi?

4. Uch tur: auto, manual, hint

4.1 auto — sukut bo'yicha

popover ni qiymatsiz yozsangiz, bu popover="auto" degani. Uning ikki xususiyati bor.

Light dismiss (yengil yopish). dialog darsida bu atamani ko'rgan edik. Popover tashqarisiga bosilsa yoki Esc bosilsa — u o'zi yopiladi. Mehmon "Yopish" tugmasini qidirib o'tirmaydi.

Bir vaqtda bitta. Bir auto popover ochilsa, boshqa ochiq auto popover o'zi yopiladi. Xuddi details darsidagi details name akkordeoni kabi. Istisno — ichma-ich popover: menyu ichidagi tugma kichik menyuni ochsa, katta menyu yopilmaydi.

Bu menyu, "Ulashish" ro'yxati va "Ish vaqti" kabi kichik oynalar uchun ideal.

4.2 manual — faqat tugma bilan

popover="manual" li element:

• tashqariga bosganda ham, Esc da ham yopilmaydi;
• boshqa popover ochilganda ham yopilmaydi — bir nechtasi birga ochiq tura oladi;
• faqat tugma bilan (yoki JavaScript bilan) yopiladi.

<button type="button" popovertarget="aksiyalar">
  Bugungi aksiyalar
</button>

<aside id="aksiyalar" popover="manual">
  <p>Seshanba: osh 20% arzon. Juma: somsa 2 ta — 1 narxida.</p>
  <button type="button" popovertarget="aksiyalar"
          popovertargetaction="hide">
    Yopish
  </button>
</aside>

Mehmon panelni ochadi va menyuni aylantira boshlaydi. Panel yopilmaydi — aynan kerakli xatti-harakat. manual li popover'da yopish tugmasi majburiy: aks holda mehmon uni hech qachon yopa olmaydi.

Ekran burchagida chiqib, bir necha soniyadan keyin o'zi yo'qoladigan bildirishnomalar (toast) ham odatda manual popover. Ularni vaqt bo'yicha ochib-yopish uchun JavaScript kerak — dialog va Popover API JS'dan darsida.

4.3 hint — maslahat (tooltip) uchun

popover="hint" — eng yangi tur. U kichik maslahatlar uchun: "?" belgisi yonidagi izoh kabi.

• auto kabi light dismiss bilan yopiladi.
• Boshqa hint ni yopadi, lekin ochiq auto popover'ga tegmaydi. Ya'ni ochiq menyu ichidagi "?" ni bossangiz, menyu yopilib ketmaydi.

<p>Bron narxi: 0 so'm
  <button type="button" popovertarget="bron-izoh"
          aria-label="Bron narxi haqida">?</button>
</p>
<p id="bron-izoh" popover="hint">
  Bron bepul. To'lov faqat choyxonada, ovqatdan keyin.
</p>

aria-label — faqat "?" belgisidan iborat tugmaga tushunarli nom beradi. label darsida ko'rgan usul.

Diqqat: hint hali Limited availability: Chrome, Edge va Firefox'da bor, Safari'da yo'q. Safari noma'lum qiymatni manual deb tushunadi. Ya'ni u yerda maslahat tashqariga bosganda yopilmaydi — faqat "?" ni qayta bosganda yopiladi. Maslahat ishlaydi, lekin noqulayroq. Muhim holatda hint o'rniga oddiy popover (auto) ishlating.

4.4 Uch tur jadvalda

Tekshirib ko'ring: "Ulashish" menyusi (auto) ochiq. Mehmon "Ish vaqti" tugmasini bosdi, u ham auto popover ochadi. Ekranda nechta popover qoladi?

5. Popover, dialog yoki title?

Endi sizda "sahifa ustida narsa ko'rsatish"ning uchta vositasi bor. Tanlash uchun ikki savol bering: mehmon javob berishi shartmi? va telefonda ishlashi kerakmi?

title — sichqoncha ustiga olib kelinganda chiqadigan kichik yozuv. Uning cheklovi katta: telefonda ko'rinmaydi, klaviatura bilan ochilmaydi. Shuning uchun muhim ma'lumotni title ga yozmang — Global atributlar darsida batafsil.

dialog va popover ni birlashtirish ham mumkin: <dialog popover> — sahifani to'smaydigan, lekin dialog ma'nosidagi oyna. Bu kamdan-kam kerak bo'ladi, faqat bilib qo'ying.

6. Tugma yonida: joylashuv — CSS'da

2-bo'limda aytdik: sukut bo'yicha popover ekran o'rtasida chiqadi. Menyu uchun bu g'alati — u tugma ostida chiqishi kerak.

Buning uchun CSS'da yangi vosita bor: anchor positioning (langar bo'yicha joylash). U popover'ni o'z tugmasiga "bog'laydi" va ekranga sig'masa, o'zi boshqa tomonga o'tkazadi. Eng qizig'i: popovertarget li tugma popover uchun langar (anchor) bo'ladi — CSS'da buni qo'lda yozish shart emas. Buni Anchor positioning darsida qilamiz. Popover'ni bezash, ochilish animatsiyasi va :popover-open holati esa — Top layer: dialog va popover'ni stillash darsida.

HTML tomonida hozir hamma narsa tayyor. CSS faqat ko'rinish qo'shadi.

7. «Bahor»: menyu sahifasining yuqori qismi

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Menyu — Choyxona «Bahor»</title>
</head>
<body>
  <header>
    <p>Choyxona «Bahor»</p>
    <button type="button" popovertarget="ish-vaqti">
      Ish vaqti
    </button>
    <button type="button" popovertarget="aksiyalar">
      Bugungi aksiyalar
    </button>
  </header>

  <aside id="ish-vaqti" popover
         aria-labelledby="ish-vaqti-sarlavha">
    <h2 id="ish-vaqti-sarlavha">Ish vaqti</h2>
    <p>Dushanba–juma: 7:00–23:00.</p>
    <p>Shanba–yakshanba: 8:00–24:00.</p>
  </aside>

  <aside id="aksiyalar" popover="manual"
         aria-labelledby="aksiya-sarlavha">
    <h2 id="aksiya-sarlavha">Bugungi aksiyalar</h2>
    <p>Seshanba: osh 20% arzon.</p>
    <button type="button" popovertarget="aksiyalar"
            popovertargetaction="hide">
      Yopish
    </button>
  </aside>

  <main>
    <h1>Menyu</h1>
    <p>Bron narxi: 0 so'm
      <button type="button" popovertarget="bron-izoh"
              aria-label="Bron narxi haqida">?</button>
    </p>
    <p id="bron-izoh" popover="hint">
      Bron bepul. To'lov faqat choyxonada.
    </p>
  </main>
</body>
</html>

Qarorlar:

• "Ish vaqti" — auto: qisqa ma'lumot, tashqariga bosganda yopilsin.
• "Aksiyalar" — manual: mehmon menyuni aylantirganda ham ochiq tursin; shuning uchun ichida "Yopish" tugmasi bor.
• "?" — hint: Safari'da manual kabi ishlaydi, lekin "?" ni qayta bosib yopiladi — ma'lumot yo'qolmaydi.
• Hamma tugmada type="button" — sahifaga keyin forma qo'shilsa ham tuzoq yo'q.
• Popover'lar aside va p — mazmunga mos teglar, div emas. aside — landmark (Sahifa landmarklari), shuning uchun har biriga aria-labelledby bilan sarlavhasidan nom berdik.

Kod html-validate dan xatosiz o'tadi.

8. Ko'p uchraydigan xatolar

8.1 id va popovertarget mos emas

popovertarget="ish_vaqti", id="ish-vaqti" — pastki chiziq va chiziqcha. Tugma bosiladi, hech narsa bo'lmaydi, xato xabari ham yo'q. html-validate ham buni ushlamaydi. Tuzatish: ikkalasini nusxalab qo'ying; DevTools'da id ni qidirib tekshiring.

8.2 Forma ichida type siz tugma

<!-- ❌ forma ichida, type yo'q -->
<form action="https://example.com/bron" method="post">
  <button popovertarget="bron-izoh">?</button>
</form>

Forma ichidagi type siz tugma — yuborish tugmasi (Tugmalar va yuborish). Brauzer bunday tugmada popovertarget ni e'tiborsiz qoldiradi va formani yuboradi. Tuzatish: type="button".

8.3 Havola yoki div bilan ochish

<a popovertarget="..."> yoki <span popovertarget="..."> ishlamaydi — atribut faqat tugmada ma'noga ega. Tuzatish: button.

8.4 manual da yopish tugmasi yo'q

manual popover light dismiss bilan yopilmaydi. Ichida "Yopish" tugmasi bo'lmasa, u ekranda abadiy qoladi va sahifaning bir qismini to'sadi. Tuzatish: har manual popover ichida popovertargetaction="hide" li tugma.

8.5 Javob shart bo'lgan joyda popover

"Bronni bekor qilasizmi?" savolini popover'ga qo'ysangiz, mehmon tashqariga bosadi va savol yo'qoladi — u javob berdimi yoki yo'qmi, noma'lum. Tuzatish: javob shart bo'lsa — modal dialog.

8.6 CSS'dagi tuzoq (keyinroq uchratasiz)

Popover'ga CSS'da display qiymatini bersangiz (masalan, display: flex), u yopiq holatda ham ko'rinib qoladi. Chunki popover'ni aynan display yashiradi. Buni Top layer darsida hal qilamiz. Hozir faqat eslab qoling: "popover yopilmayapti" — ko'pincha CSS sababli.

9. Mashqlar

1-mashq (oson): "Manzil" popover'i

"Manzil" tugmasini yozing. Bosilganda popover'da "Toshkent, Chilonzor, 7-mavze" chiqsin. Tashqariga bosganda yopilsin.

<button type="button" popovertarget="manzil">Manzil</button>
<p id="manzil" popover>Toshkent, Chilonzor, 7-mavze.</p>

2-mashq (o'rta): "Ulashish" menyusi

"Ulashish" tugmasi popover'da uchta havolali ro'yxat ochsin: Telegram, WhatsApp va "Havolani nusxalash" sahifasi. Ro'yxat uchun mos teg tanlang. Havolalar uchun namuna manzillar: https://t.me/sizning_kanal, https://example.com/whatsapp, https://example.com/havola.

Eslatma: havolalar ro'yxati — ul va li ichida a (Ro'yxatlar va Havola asoslari darslari).

<button type="button" popovertarget="ulashish">
  Ulashish
</button>

<ul id="ulashish" popover>
  <li><a href="https://t.me/sizning_kanal">Telegram</a></li>
  <li><a href="https://example.com/whatsapp">WhatsApp</a></li>
  <li><a href="https://example.com/havola">Havolani
    nusxalash</a></li>
</ul>

3-mashq (qiyin): To'g'ri vositani tanlang

Har bir vaziyat uchun vositani tanlang — dialog (modal), popover (qaysi turi) yoki details — va sababini bir gap bilan yozing:

1. Taomning tarkibi — "Osh" nomi ostida, bosilganda ochiladi va sahifada o'z joyida qoladi.
2. "Hisobingizdan chiqasizmi?" savoli.
3. "Til" menyusi: O'zbekcha, Русский, English.
4. Ofitsiantni chaqirish paneli: ochilgach, mehmon menyuni aylantirsa ham tursin.
5. "Stol raqami" yonidagi "?" izohi.

10. Real ishda

• Kutubxonalardan voz kechish. Dropdown va tooltip uchun yillar davomida Popper va Floating UI kabi JavaScript kutubxonalari ishlatilgan (kursda uchratasiz, hozir bilish shart emas). Popover va anchor positioning hamma brauzerga yetib borgan sari jamoalar ularni native HTML bilan almashtirmoqda.
• Dizayn tizimlari. Katta kompaniyalarning komponent kutubxonalari menyu va maslahatlarni tobora ko'proq popover atributi asosida quradi. Eski brauzerlar uchun esa kichik "polyfill" (yetishmayotgan imkoniyatni JavaScript bilan to'ldiradigan kod) qo'shiladi.
• Accessibility'ning tekin qismi. popovertarget li tugma o'z holatini ekran o'quvchiga o'zi aytadi. Qo'lda yozilgan menyularda bu eng ko'p unutiladigan qism.
• Intervyuda so'raladi: "Popover va dialog farqi nima?" Javob: modal dialog sahifani to'sadi va javob kutadi; popover to'smaydi va light dismiss bilan yopiladi.

Xulosa

• popover — sahifa ustida, top layer'da ochiladigan va sahifani to'smaydigan element; boshida yashirin.
• popovertarget li button uni JavaScript'siz boshqaradi; popovertargetaction — toggle, show, hide.
• auto — light dismiss va bir vaqtda bitta; manual — faqat tugma bilan yopiladi; hint — maslahat uchun, hali Limited.
• Popover 2025-yil yanvaridan Newly available; eski brauzerda element shunchaki doim ko'rinadi.
• Javob shart bo'lsa — modal dialog; qisqa qo'shimcha ma'lumot — popover; title ga muhim narsa yozilmaydi.
• Joylashuv va bezak — CSS'da (anchor positioning, :popover-open).

Keyingi dars: Invoker commands: tugmalar bilan boshqarish — command va commandfor bilan bitta tugma tizimi orqali ham dialog, ham popover'ni boshqaramiz.

Manbalar

• MDN: "Popover API" va "Using the Popover API" — developer.mozilla.org
• MDN: "popover" global atributi (auto, manual, hint) — developer.mozilla.org
• Web Features Explorer: "popover", "popover-hint" — web-platform-dx.github.io/web-features-explorer
• Open UI: "Popover API explainer" — open-ui.org