ຄໍາແນະນໍາເຄື່ອງມືມີຄວາມຮູ້ສຶກຄືກັບບັນຫາ UI ທີ່ນ້ອຍທີ່ສຸດທີ່ທ່ານສາມາດມີ. ພວກມັນນ້ອຍໆ ແລະປົກກະຕິແລ້ວຖືກເຊື່ອງໄວ້. ເມື່ອໃຜຜູ້ຫນຶ່ງຖາມວິທີການສ້າງຫນຶ່ງ, ຄໍາຕອບແບບດັ້ງເດີມເກືອບສະເຫມີກັບຄືນມາໂດຍໃຊ້ບາງຫ້ອງສະຫມຸດ JavaScript. ແລະເປັນເວລາດົນນານ, ນັ້ນແມ່ນຄໍາແນະນໍາທີ່ສົມເຫດສົມຜົນ. ຂ້ອຍຕິດຕາມມັນຄືກັນ. ໃນດ້ານ, ຄໍາແນະນໍາເຄື່ອງມືແມ່ນງ່າຍດາຍ. ເລື່ອນ ຫຼື ເນັ້ນໃສ່ອົງປະກອບໃດໜຶ່ງ, ສະແດງກ່ອງນ້ອຍທີ່ມີຂໍ້ຄວາມບາງອັນ, ຈາກນັ້ນເຊື່ອງມັນເມື່ອຜູ້ໃຊ້ຍ້າຍອອກໄປ. ແຕ່ເມື່ອທ່ານສົ່ງຫນຶ່ງໄປຫາຜູ້ໃຊ້ທີ່ແທ້ຈິງ, ແຄມຈະເລີ່ມສະແດງໃຫ້ເຫັນ. ຜູ້ໃຊ້ແປ້ນພິມ Tab ເຂົ້າໄປໃນ trigger, ແຕ່ບໍ່ເຄີຍເຫັນຄໍາແນະນໍາເຄື່ອງມື. ຜູ້ອ່ານຫນ້າຈໍປະກາດມັນສອງຄັ້ງ, ຫຼືບໍ່ແມ່ນທັງຫມົດ. ຄໍາແນະນໍາເຄື່ອງມືຈະ flickers ໃນເວລາທີ່ທ່ານຍ້າຍຫນູໄວເກີນໄປ. ມັນທັບຊ້ອນເນື້ອໃນຢູ່ໃນຫນ້າຈໍຂະຫນາດນ້ອຍກວ່າ. ກົດ Esc ບໍ່ປິດມັນ. ຈຸດສຸມໄດ້ຮັບການສູນເສຍ. ເມື່ອເວລາຜ່ານໄປ, ລະຫັດຄໍາແນະນໍາເຄື່ອງມືຂອງຂ້ອຍໄດ້ເຕີບໃຫຍ່ຂຶ້ນໃນສິ່ງທີ່ຂ້ອຍບໍ່ຢາກເປັນເຈົ້າຂອງອີກຕໍ່ໄປ. ຜູ້ຟັງເຫດການໄດ້ລວບລວມ. Hover ແລະຈຸດສຸມຕ້ອງໄດ້ຮັບການຈັດການແຍກຕ່າງຫາກ. ການຄລິກພາຍນອກຕ້ອງການກໍລະນີພິເສດ. ຄຸນລັກສະນະຂອງ ARIA ຕ້ອງໄດ້ຮັບການ sync ດ້ວຍມື. ທຸກໆການແກ້ໄຂຂະຫນາດນ້ອຍໄດ້ເພີ່ມຊັ້ນຂອງເຫດຜົນອີກ. ຫ້ອງສະຫມຸດໄດ້ຊ່ວຍ, ແຕ່ພວກມັນຍັງຄ້າຍຄືກັບກ່ອງດໍາທີ່ຂ້ອຍເຮັດວຽກຢູ່ອ້ອມຮອບແທນທີ່ຈະເຂົ້າໃຈຢ່າງຄົບຖ້ວນກ່ຽວກັບສິ່ງທີ່ເກີດຂື້ນຢູ່ເບື້ອງຫຼັງ. ນັ້ນແມ່ນສິ່ງທີ່ກະຕຸ້ນໃຫ້ຂ້ອຍເບິ່ງ Popover API ໃໝ່ກວ່າ. ຂ້ອຍຢາກເຫັນສິ່ງທີ່ຈະເກີດຂຶ້ນຖ້າຂ້ອຍສ້າງຄໍາແນະນໍາເຄື່ອງມືດຽວໂດຍໃຊ້ຕົວແບບພື້ນເມືອງຂອງຕົວທ່ອງເວັບໂດຍບໍ່ມີການຊ່ວຍເຫຼືອຈາກຫ້ອງສະຫມຸດ. ເມື່ອພວກເຮົາເລີ່ມຕົ້ນ, ມັນເປັນມູນຄ່າທີ່ສັງເກດວ່າ, ເຊັ່ນດຽວກັນກັບລັກສະນະໃຫມ່, ມີບາງສິ່ງທີ່ຍັງຖືກລີດອອກ. ທີ່ເວົ້າວ່າ, ປະຈຸບັນມັນມັກການສະຫນັບສະຫນູນຕົວທ່ອງເວັບທີ່ດີ, ເຖິງແມ່ນວ່າມີຫຼາຍໆຊິ້ນຕໍ່ API ໂດຍລວມທີ່ຢູ່ໃນ flux. ມັນຄຸ້ມຄ່າທີ່ຈະຕິດຕາມ Caniuse ໃນເວລານີ້. ຄໍາແນະນໍາເຄື່ອງມື "ເກົ່າ". ກ່ອນ Popover API, ການໃຊ້ຫ້ອງສະໝຸດຄຳແນະນຳບໍ່ແມ່ນທາງລັດ. ມັນເປັນຄ່າເລີ່ມຕົ້ນ. ຕົວທ່ອງເວັບບໍ່ມີແນວຄວາມຄິດພື້ນເມືອງຂອງຄໍາແນະນໍາເຄື່ອງມືທີ່ເຮັດວຽກໃນທົ່ວຫນູ, keyboard, ແລະເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ. ຖ້າທ່ານສົນໃຈກ່ຽວກັບຄວາມຖືກຕ້ອງ, ທາງເລືອກດຽວຂອງທ່ານແມ່ນໃຊ້ຫ້ອງສະຫມຸດ, ແລະນັ້ນແມ່ນສິ່ງທີ່ຂ້ອຍໄດ້ເຮັດ. ໃນລະດັບສູງ, ຮູບແບບແມ່ນສະເຫມີຄືກັນ: ອົງປະກອບ trigger, ອົງປະກອບຄໍາແນະນໍາເຄື່ອງມືທີ່ເຊື່ອງໄວ້, ແລະ JavaScript ເພື່ອປະສານງານທັງສອງ.
ຫ້ອງສະໝຸດໄດ້ຈັດການສາຍໄຟທີ່ອະນຸຍາດໃຫ້ອົງປະກອບສະແດງຢູ່ເທິງ ຫຼື ໂຟກັສ, ເຊື່ອງການມົວ ຫຼື ເມົາສ໌, ແລະປ່ຽນຕຳແໜ່ງ/ປັບຂະໜາດເມື່ອເລື່ອນ.
ເມື່ອເວລາຜ່ານໄປ, ຄໍາແນະນໍາຂອງເຄື່ອງມືອາດຈະອ່ອນແອ. ການປ່ຽນແປງຂະຫນາດນ້ອຍມີຄວາມສ່ຽງ. ການແກ້ໄຂເລັກນ້ອຍເຮັດໃຫ້ເກີດການຖົດຖອຍ. ຮ້າຍແຮງໄປກວ່ານັ້ນ, ການເພີ່ມຄໍາແນະນໍາໃຫມ່ໄດ້ສືບທອດຄວາມສັບສົນດຽວກັນ. ສິ່ງທີ່ເຮັດໄດ້ທາງດ້ານເຕັກນິກ, ແຕ່ບໍ່ເຄີຍໄດ້ຮັບຄວາມຮູ້ສຶກຕົກລົງຫຼືສໍາເລັດ. ນັ້ນແມ່ນສະຖານະການໃນເວລາທີ່ຂ້ອຍຕັດສິນໃຈສ້າງຄໍາແນະນໍາເຄື່ອງມືໃຫມ່ໂດຍໃຊ້ Popover API ຂອງຕົວທ່ອງເວັບ. ຊ່ວງເວລາທີ່ຂ້ອຍໄດ້ທົດລອງໃຊ້ Popover API ຂ້ອຍບໍ່ໄດ້ປ່ຽນໄປໃຊ້ Popover API ເພາະວ່າຂ້ອຍຕ້ອງການທົດລອງສິ່ງໃໝ່. ຂ້ອຍປ່ຽນເພາະວ່າຂ້ອຍເມື່ອຍກັບການຮັກສາພຶດຕິກໍາຄໍາແນະນໍາທີ່ຂ້ອຍເຊື່ອວ່າຕົວທ່ອງເວັບຄວນຈະເຂົ້າໃຈແລ້ວ. ຂ້ອຍສົງໄສໃນຕອນທໍາອິດ. API ເວັບໄຊຕ໌ໃຫມ່ສ່ວນໃຫຍ່ສັນຍາກັບຄວາມງ່າຍດາຍ, ແຕ່ຍັງຕ້ອງການກາວ, ການຈັດການແຂບ, ຫຼືເຫດຜົນທາງລົບທີ່ສ້າງຄວາມສັບສົນດຽວກັນທີ່ເຈົ້າພະຍາຍາມຫລົບຫນີຢ່າງງຽບໆ. ດັ່ງນັ້ນ, ຂ້າພະເຈົ້າໄດ້ພະຍາຍາມ Popover API ໃນວິທີທີ່ນ້ອຍທີ່ສຸດທີ່ເປັນໄປໄດ້. ນີ້ແມ່ນສິ່ງທີ່ເບິ່ງຄືວ່າ:
1. ແປ້ນພິມ "ພຽງແຕ່ເຮັດວຽກ" ການຮອງຮັບແປ້ນພິມແມ່ນຂຶ້ນກັບຫຼາຍຊັ້ນທີ່ວາງໄວ້ຢ່າງຖືກຕ້ອງ: ໂຟກັສຕ້ອງກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມື, ມົວຕ້ອງເຊື່ອງມັນ, Esc ຕ້ອງຖືກສາຍດ້ວຍມື, ແລະເວລາເປັນເລື່ອງສໍາຄັນ. ຖ້າທ່ານພາດກໍລະນີທີ່ມີຂອບຫນຶ່ງ, ຄໍາແນະນໍາເຄື່ອງມືອາດຈະເປີດດົນເກີນໄປຫຼືຫາຍໄປກ່ອນທີ່ມັນຈະອ່ານໄດ້. ດ້ວຍຄຸນລັກສະນະ popover ທີ່ຖືກຕັ້ງເປັນອັດຕະໂນມັດຫຼືຄູ່ມື, ຕົວທ່ອງເວັບໃຊ້ເວລາພື້ນຖານ: Tab ແລະ Shift+Tab ປະຕິບັດເປັນປົກກະຕິ, Esc ປິດຄໍາແນະນໍາເຄື່ອງມືທຸກໆຄັ້ງ, ແລະບໍ່ຈໍາເປັນຕ້ອງມີຜູ້ຟັງເພີ່ມເຕີມ.
ສິ່ງທີ່ຫາຍໄປຈາກ codebase ຂອງຂ້ອຍແມ່ນຕົວຈັດການການກົດປຸ່ມທົ່ວໂລກ, ເຫດຜົນການທໍາຄວາມສະອາດສະເພາະ Esc, ແລະການກວດສອບສະຖານະໃນລະຫວ່າງການນໍາທາງແປ້ນພິມ. ປະສົບການແປ້ນພິມຢຸດເຊົາເປັນສິ່ງທີ່ຂ້ອຍຕ້ອງຮັກສາ, ແລະມັນກາຍເປັນການຮັບປະກັນຂອງຕົວທ່ອງເວັບ. 2. Screenreader Predictability ນີ້ແມ່ນການປັບປຸງທີ່ໃຫຍ່ທີ່ສຸດ. ເຖິງແມ່ນວ່າມີການເຮັດວຽກຂອງ ARIA ລະມັດລະວັງ, ພຶດຕິກໍາແຕກຕ່າງກັນ, ດັ່ງທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມາກ່ອນຫນ້ານີ້. ທຸກໆການປ່ຽນແປງນ້ອຍໆຮູ້ສຶກວ່າມີຄວາມສ່ຽງ. ການໃຊ້ popover ທີ່ມີພາລະບົດບາດທີ່ເຫມາະສົມເບິ່ງແລະມີຄວາມຮູ້ສຶກທີ່ຫມັ້ນຄົງແລະຄາດເດົາໄດ້ຫຼາຍເທົ່າທີ່ຈະເກີດຂຶ້ນ:
ແລະນີ້ແມ່ນການຊະນະອີກອັນຫນຶ່ງ: ຫຼັງຈາກສະວິດ, Lighthouse ຢຸດເຊົາການກໍານົດຄໍາເຕືອນຂອງລັດ ARIA ທີ່ບໍ່ຖືກຕ້ອງສໍາລັບການໂຕ້ຕອບ, ສ່ວນໃຫຍ່ແມ່ນຍ້ອນວ່າບໍ່ມີລັດ ARIA ແບບກໍານົດເອງສໍາລັບຂ້ອຍທີ່ຈະຜິດພາດໂດຍບັງເອີນ.
3. ການຄຸ້ມຄອງຈຸດສຸມ ຈຸດສຸມທີ່ໃຊ້ເພື່ອເປັນຄວາມອ່ອນແອ. ກ່ອນໜ້ານີ້, ຂ້ອຍມີກົດລະບຽບເຊັ່ນ: ໃຫ້ໂຟກັສຕີກເກີສະແດງຄໍາແນະນໍາເຄື່ອງມື, ຍ້າຍໂຟກັສໄປຫາປາຍເຄື່ອງມື ແລະຢ່າປິດ, ບິດເບືອນຕົວກະຕຸ້ນເມື່ອມັນໃກ້ເກີນໄປ, ແລະປິດຄຳແນະນຳ ແລະຟື້ນຟູຈຸດສຸມດ້ວຍຕົນເອງ. ນີ້ເຮັດວຽກຈົນກ່ວາມັນບໍ່ໄດ້. ດ້ວຍ Popover API, ຕົວທ່ອງເວັບບັງຄັບໃຊ້ຮູບແບບທີ່ງ່າຍດາຍກວ່າທີ່ຈຸດສຸມສາມາດຍ້າຍເຂົ້າໄປໃນ popover ໄດ້ຕາມທໍາມະຊາດ. ການປິດ popover ກັບຄືນມາເນັ້ນໃສ່ຕົວກະພິບ, ແລະບໍ່ມີດັກໂຟກັສທີ່ເບິ່ງບໍ່ເຫັນຫຼືການສູນເສຍເວລາໂຟກັສ. ແລະຂ້ອຍບໍ່ໄດ້ເພີ່ມລະຫັດການຟື້ນຟູຈຸດສຸມ; ຂ້ອຍເອົາມັນອອກ.
ສະຫຼຸບ Popover API ຫມາຍຄວາມວ່າຄໍາແນະນໍາເຄື່ອງມືບໍ່ແມ່ນສິ່ງທີ່ທ່ານຈໍາລອງອີກຕໍ່ໄປ. ພວກເຂົາເປັນສິ່ງທີ່ຕົວທ່ອງເວັບເຂົ້າໃຈ. ການເປີດ, ປິດ, ພຶດຕິກໍາແປ້ນພິມ, ການຈັດການ Escape, ແລະການເຂົ້າຫາອັນໃຫຍ່ຫຼວງໃນປັດຈຸບັນແມ່ນມາຈາກເວທີຂອງມັນເອງ, ບໍ່ແມ່ນມາຈາກ JavaScript ສະເພາະ. ນັ້ນບໍ່ໄດ້ຫມາຍຄວາມວ່າຫ້ອງສະຫມຸດຄໍາແນະນໍາເຄື່ອງມືແມ່ນລ້າສະໄຫມຍ້ອນວ່າພວກເຂົາຍັງມີຄວາມຫມາຍສໍາລັບລະບົບການອອກແບບທີ່ສັບສົນ, ການປັບແຕ່ງຢ່າງຫນັກ, ຫຼືຂໍ້ຈໍາກັດຂອງມໍລະດົກ, ແຕ່ຄ່າເລີ່ມຕົ້ນໄດ້ປ່ຽນໄປ. ສໍາລັບຄັ້ງທໍາອິດ, ຄໍາແນະນໍາທີ່ງ່າຍດາຍທີ່ສຸດຍັງສາມາດເປັນຄໍາທີ່ຖືກຕ້ອງທີ່ສຸດ. ຖ້າທ່ານຢາກຮູ້ຢາກເຫັນ, ລອງທົດລອງນີ້: ພຽງແຕ່ປ່ຽນພຽງແຕ່ຄໍາແນະນໍາຫນຶ່ງໃນຜະລິດຕະພັນຂອງທ່ານດ້ວຍ Popover API, ຢ່າຂຽນຄືນໃຫມ່, ຢ່າຍ້າຍລະບົບທັງຫມົດ, ແລະພຽງແຕ່ເລືອກເອົາຫນຶ່ງແລະເບິ່ງສິ່ງທີ່ຫາຍໄປຈາກລະຫັດຂອງທ່ານ. ເມື່ອແພລະຕະຟອມເຮັດໃຫ້ທ່ານມີພື້ນຖານທີ່ດີກວ່າ, ໄຊຊະນະບໍ່ພຽງແຕ່ເປັນສາຍ JavaScript ຫນ້ອຍ, ແຕ່ມັນເປັນສິ່ງທີ່ຫນ້ອຍທີ່ທ່ານຕ້ອງກັງວົນກ່ຽວກັບທັງຫມົດ. ກວດເບິ່ງລະຫັດແຫຼ່ງເຕັມໃນ repo GitHub ຂອງຂ້ອຍ. ອ່ານເພີ່ມເຕີມ ສໍາລັບການລົງເລິກເຂົ້າໄປໃນ popovers ແລະ APIs ທີ່ກ່ຽວຂ້ອງ:
"Poppin 'In", Geoff Graham "ການຊີ້ແຈງຄວາມສໍາພັນລະຫວ່າງ Popovers ແລະ Dialogs", Zell Liew " popover = hint ແມ່ນຫຍັງ?", Una Kravets "ຄໍາສັ່ງ Invoker", Daniel Schwarz "ການສ້າງການແຈ້ງເຕືອນການປິດອັດຕະໂນມັດດ້ວຍ HTML Popover", Preethi ເປີດ UI Popover API Explainer “Pop(over) the Balloons”, John Rhea "ການຈັດຕໍາແຫນ່ງ CSS Anchor", Juan Diego Rodríguez
MDN ຍັງສະຫນອງເອກະສານດ້ານວິຊາການທີ່ສົມບູນແບບສໍາລັບ API Popover.
