ព័ត៌មានជំនួយមានអារម្មណ៍ថាដូចជាបញ្ហា UI តូចបំផុតដែលអ្នកអាចមាន។ ពួកវាតូចហើយជាធម្មតាលាក់។ នៅពេលនរណាម្នាក់សួរពីរបៀបបង្កើតមួយ ចម្លើយបែបបុរាណស្ទើរតែតែងតែត្រលប់មកវិញដោយប្រើបណ្ណាល័យ JavaScript មួយចំនួន។ ហើយអស់រយៈពេលជាយូរ នោះគឺជាដំបូន្មានដ៏សមហេតុផល។ ខ្ញុំក៏ធ្វើតាមវាដែរ។ នៅលើផ្ទៃខាងលើ ព័ត៌មានជំនួយគឺសាមញ្ញ។ ដាក់កណ្ដុរ ឬផ្តោតលើធាតុមួយ បង្ហាញប្រអប់តូចមួយដែលមានអត្ថបទមួយចំនួន បន្ទាប់មកលាក់វានៅពេលអ្នកប្រើផ្លាស់ទីទៅឆ្ងាយ។ ប៉ុន្តែនៅពេលដែលអ្នកបញ្ជូនម្នាក់ទៅអ្នកប្រើប្រាស់ពិតប្រាកដ គែមចាប់ផ្តើមបង្ហាញ។ អ្នកប្រើក្ដារចុច Tab ចូលទៅក្នុងគន្លឹះ ប៉ុន្តែមិនដែលឃើញព័ត៌មានជំនួយទេ។ អ្នកអានអេក្រង់ប្រកាសវាពីរដងឬអត់។ ព័ត៌មានជំនួយនឹងភ្លឹបភ្លែតៗ នៅពេលអ្នកផ្លាស់ទីកណ្តុរលឿនពេក។ វាត្រួតលើមាតិកានៅលើអេក្រង់តូចជាង។ ការចុច Esc មិនបិទវាទេ។ ការផ្តោតអារម្មណ៍ត្រូវបានបាត់បង់។ យូរៗទៅ លេខកូដណែនាំឧបករណ៍របស់ខ្ញុំបានរីកចម្រើនទៅជាអ្វីមួយដែលខ្ញុំពិតជាមិនចង់ធ្វើជាម្ចាស់ទៀតទេ។ អ្នកស្តាប់ព្រឹត្តិការណ៍បានប្រមូលផ្តុំគ្នា។ Hover និងការផ្តោតអារម្មណ៍ត្រូវតែដោះស្រាយដោយឡែកពីគ្នា។ ការចុចខាងក្រៅត្រូវការករណីពិសេស។ គុណលក្ខណៈ ARIA ត្រូវតែរក្សាសមកាលកម្មដោយដៃ។ រាល់ការជួសជុលតូចៗបានបន្ថែមស្រទាប់នៃតក្កវិជ្ជាមួយទៀត។ បណ្ណាល័យបានជួយ ប៉ុន្តែពួកគេក៏ដូចជាប្រអប់ខ្មៅដែលខ្ញុំបានធ្វើការនៅជុំវិញ ជំនួសឱ្យការយល់ដឹងពេញលេញអំពីអ្វីដែលកំពុងកើតឡើងនៅពីក្រោយឆាក។ នោះហើយជាអ្វីដែលជំរុញឱ្យខ្ញុំមើលទៅ Popover API ថ្មីជាងនេះ។ ខ្ញុំចង់ឃើញអ្វីដែលនឹងកើតឡើង ប្រសិនបើខ្ញុំបង្កើតព័ត៌មានជំនួយតែមួយឡើងវិញដោយប្រើគំរូដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដោយគ្មានជំនួយពីបណ្ណាល័យ។ នៅពេលដែលយើងចាប់ផ្តើម វាគួរអោយកត់សំគាល់ថា ដូចជាជាមួយនឹងមុខងារថ្មីណាមួយដែរ មានរឿងមួយចំនួនជាមួយវា ដែលនៅតែត្រូវបានកាត់ផ្តាច់។ ដែលបាននិយាយថាបច្ចុប្បន្ននេះវារីករាយនឹងការគាំទ្រកម្មវិធីរុករកដ៏អស្ចារ្យទោះបីជាមានបំណែកជាច្រើនចំពោះ API ទាំងមូលដែលស្ថិតក្នុងលំហូរក៏ដោយ។ វាមានតម្លៃក្នុងការតាមដាន Caniuse ក្នុងពេលនេះ។ ព័ត៌មានជំនួយ "ចាស់" មុនពេល Popover API ការប្រើបណ្ណាល័យព័ត៌មានជំនួយមិនមែនជាផ្លូវកាត់ទេ។ វាជាលំនាំដើម។ កម្មវិធីរុករកតាមអ៊ីនធឺណិតមិនមានគំនិតដើមនៃព័ត៌មានជំនួយដែលដំណើរការលើកណ្តុរ ក្តារចុច និងបច្ចេកវិទ្យាជំនួយទេ។ ប្រសិនបើអ្នកយកចិត្តទុកដាក់ចំពោះភាពត្រឹមត្រូវ ជម្រើសតែមួយគត់របស់អ្នកគឺប្រើបណ្ណាល័យ ហើយនោះជាអ្វីដែលខ្ញុំបានធ្វើ។ នៅកម្រិតខ្ពស់ លំនាំគឺតែងតែដូចគ្នា៖ ធាតុកេះ ធាតុជំនួយដែលលាក់ និង JavaScript ដើម្បីសម្របសម្រួលទាំងពីរ។
បណ្ណាល័យបានគ្រប់គ្រងខ្សែភ្លើងដែលអនុញ្ញាតឱ្យធាតុបង្ហាញនៅពេលដាក់ ឬផ្ដោត លាក់នៅលើព្រិល ឬទុកកណ្តុរ និងកំណត់ទីតាំង/ប្ដូរទំហំនៅលើរមូរ។
យូរ ៗ ទៅព័ត៌មានជំនួយអាចក្លាយទៅជាផុយស្រួយ។ ការផ្លាស់ប្តូរតូចមានហានិភ័យ។ ការជួសជុលតិចតួចបណ្តាលឱ្យមានការតំរែតំរង់។ អាក្រក់ជាងនេះ ការបន្ថែមព័ត៌មានជំនួយថ្មីបានទទួលមរតកពីភាពស្មុគស្មាញដូចគ្នា។ អ្វីៗដំណើរការតាមបច្ចេកទេស ប៉ុន្តែមិនមានអារម្មណ៍ថាបានដោះស្រាយ ឬពេញលេញទេ។ នោះគឺជាស្ថានភាពនៅពេលដែលខ្ញុំសម្រេចចិត្តបង្កើតព័ត៌មានជំនួយឡើងវិញដោយប្រើ Popover API ដើមរបស់កម្មវិធីរុករក។ ពេលដែលខ្ញុំបានសាកល្បង Popover API ខ្ញុំមិនបានប្ដូរទៅប្រើ Popover API ទេ ព្រោះខ្ញុំចង់សាកល្បងអ្វីដែលថ្មី។ ខ្ញុំបានប្តូរដោយសារតែខ្ញុំធុញទ្រាន់នឹងការរក្សាឥរិយាបថព័ត៌មានជំនួយដែលខ្ញុំជឿថាកម្មវិធីរុករកគួរតែយល់រួចហើយ។ ដំបូងឡើយ ខ្ញុំមានការសង្ស័យ។ API គេហទំព័រថ្មីភាគច្រើនសន្យាថានឹងមានភាពសាមញ្ញ ប៉ុន្តែនៅតែត្រូវការកាវ ការដោះស្រាយគែម ឬតក្កវិជ្ជាជំនួសដែលបង្កើតឡើងវិញនូវភាពស្មុគស្មាញដូចគ្នាដែលអ្នកកំពុងព្យាយាមគេចខ្លួន។ ដូច្នេះខ្ញុំបានសាកល្បង Popover API តាមវិធីតូចបំផុតដែលអាចធ្វើទៅបាន។ នេះជាអ្វីដែលមើលទៅដូចជា៖
1. ក្តារចុច "គ្រាន់តែធ្វើការ" ការគាំទ្រក្ដារចុចអាស្រ័យលើស្រទាប់ជាច្រើនដែលតម្រង់ជួរឱ្យបានត្រឹមត្រូវ៖ ការផ្ដោតត្រូវតែកេះព័ត៌មានជំនួយ ការមិនច្បាស់ត្រូវលាក់វា Esc ត្រូវមានខ្សែដោយដៃ ហើយពេលវេលាក៏សំខាន់។ ប្រសិនបើអ្នកខកខានករណីគែមមួយ នោះព័ត៌មានជំនួយនឹងនៅតែបើកយូរពេក ឬបាត់មុនពេលវាអាចត្រូវបានអាន។ ជាមួយនឹងគុណលក្ខណៈ popover ដែលបានកំណត់ទៅជាស្វ័យប្រវត្តិ ឬដោយដៃ កម្មវិធីរុករកតាមអ៊ីនធឺណិតកាន់កាប់មូលដ្ឋាន៖ ថេប និង ប្ដូរ (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Shift) + ថេប (Tab) ដំណើរការជាធម្មតា អេសស៊ីនឹងបិទព័ត៌មានជំនួយជារៀងរាល់ពេល ហើយមិនត្រូវការអ្នកស្តាប់បន្ថែមទេ។
អ្វីដែលបាត់ពីមូលដ្ឋានកូដរបស់ខ្ញុំគឺអ្នកដោះស្រាយការចុចគ្រាប់ចុចសកល តក្កវិជ្ជាសម្អាតជាក់លាក់ Esc និងការពិនិត្យស្ថានភាពអំឡុងពេលរុករកក្ដារចុច។ បទពិសោធន៍ក្តារចុចបានឈប់ជាអ្វីដែលខ្ញុំត្រូវថែរក្សា ហើយវាបានក្លាយជាការធានារបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ 2. ការទស្សន៍ទាយកម្មវិធីអានអេក្រង់ នេះគឺជាការកែលម្អដ៏ធំបំផុត។ សូម្បីតែជាមួយនឹងការងារ ARIA ដោយប្រុងប្រយ័ត្នក៏ដោយ ក៏អាកប្បកិរិយាប្រែប្រួល ដូចដែលខ្ញុំបានរៀបរាប់ពីមុន។ រាល់ការផ្លាស់ប្តូរតូចៗមានអារម្មណ៍ថាមានគ្រោះថ្នាក់។ ការប្រើ popover ជាមួយនឹងតួនាទីត្រឹមត្រូវមើលទៅ និងមានអារម្មណ៍ថាមានស្ថេរភាព និងអាចទស្សន៍ទាយបានច្រើនជាងអ្វីដែលនឹងកើតឡើង៖
ហើយនេះគឺជាការឈ្នះមួយផ្សេងទៀត៖ បន្ទាប់ពីការផ្លាស់ប្តូរ ពន្លឺភ្លើងបានឈប់ដាក់ទង់ការព្រមានរដ្ឋ ARIA មិនត្រឹមត្រូវសម្រាប់អន្តរកម្ម ភាគច្រើនដោយសារតែមិនមានរដ្ឋ ARIA ផ្ទាល់ខ្លួនសម្រាប់ខ្ញុំក្នុងការខុសដោយចៃដន្យ។
3. ការគ្រប់គ្រងការផ្តោតអារម្មណ៍ ការផ្តោតអារម្មណ៍ធ្លាប់មានភាពផុយស្រួយ។ ពីមុន ខ្ញុំមានច្បាប់ដូចជា៖ អនុញ្ញាតឱ្យការផ្តោតអារម្មណ៍បង្ហាញព័ត៌មានជំនួយ ផ្លាស់ទីការផ្តោតអារម្មណ៍ទៅក្នុងព័ត៌មានជំនួយ ហើយកុំបិទ ធ្វើឱ្យព្រិលគន្លឹះនៅពេលវាជិតពេក ហើយបិទព័ត៌មានជំនួយ និងស្ដារការផ្តោតអារម្មណ៍ដោយដៃ។ វាដំណើរការរហូតដល់វាមិនមាន។ ជាមួយនឹង Popover API កម្មវិធីរុករកតាមអ៊ីនធឺណិតអនុវត្តគំរូដ៏សាមញ្ញមួយដែលការផ្តោតអារម្មណ៍អាចផ្លាស់ទីទៅ popover ដោយធម្មជាតិ។ ការបិទ popover ត្រឡប់ផ្តោតលើគន្លឹះ ហើយមិនមានអន្ទាក់ផ្តោតដែលមើលមិនឃើញ ឬបាត់បង់ការផ្តោតអារម្មណ៍។ ហើយខ្ញុំមិនបានបន្ថែមលេខកូដស្ដារការផ្តោតអារម្មណ៍ទេ។ ខ្ញុំបានដកវាចេញ។
សេចក្តីសន្និដ្ឋាន Popover API មានន័យថា ព័ត៌មានជំនួយមិនមែនជាអ្វីដែលអ្នកក្លែងធ្វើទៀតទេ។ ពួកគេជាអ្វីដែលកម្មវិធីរុករកយល់។ ការបើក ការបិទ ឥរិយាបថក្តារចុច ការដោះស្រាយការរត់គេច និងផ្នែកធំនៃភាពងាយស្រួលឥឡូវនេះបានមកពីវេទិកាផ្ទាល់ មិនមែនមកពី JavaScript នោះទេ។ នោះមិនមានន័យថាបណ្ណាល័យព័ត៌មានជំនួយគឺលែងប្រើហើយ ព្រោះវានៅតែមានន័យសម្រាប់ប្រព័ន្ធរចនាដ៏ស្មុគស្មាញ ការប្ដូរតាមបំណងធ្ងន់ៗ ឬឧបសគ្គពីអតីតកាល ប៉ុន្តែលំនាំដើមបានផ្លាស់ប្តូរ។ ជាលើកដំបូង ព័ត៌មានជំនួយសាមញ្ញបំផុតក៏អាចត្រឹមត្រូវបំផុតផងដែរ។ ប្រសិនបើអ្នកចង់ដឹងចង់ឃើញ សូមសាកល្បងការពិសោធន៍នេះ៖ គ្រាន់តែជំនួសព័ត៌មានជំនួយមួយនៅក្នុងផលិតផលរបស់អ្នកជាមួយ Popover API កុំសរសេរឡើងវិញទាំងអស់ កុំធ្វើចំណាកស្រុកប្រព័ន្ធទាំងមូល ហើយគ្រាន់តែជ្រើសរើសមួយ ហើយមើលអ្វីដែលបាត់ពីកូដរបស់អ្នក។ នៅពេលដែលវេទិកាផ្តល់ឱ្យអ្នកនូវភាពដើមដែលប្រសើរជាងមុន ការឈ្នះគឺមិនមែនគ្រាន់តែជាបន្ទាត់តិចជាងនៃ JavaScript ប៉ុណ្ណោះទេ ប៉ុន្តែវាជារឿងតិចតួចដែលអ្នកត្រូវព្រួយបារម្ភទាល់តែសោះ។ សូមពិនិត្យមើលកូដប្រភពពេញលេញនៅក្នុង GitHub repo របស់ខ្ញុំ។ ការអានបន្ថែម សម្រាប់ការជ្រមុជទឹកកាន់តែជ្រៅទៅក្នុង popovers និង APIs ពាក់ព័ន្ធ៖
"Poppin' In", Geoff Graham "ការបញ្ជាក់ពីទំនាក់ទំនងរវាង Popovers និង Dialogs", Zell Liew "តើអ្វីទៅជា popover = ព័ត៌មានជំនួយ?", Una Kravets Daniel Schwarz "ពាក្យបញ្ជាអ្នកស្នើសុំ" "បង្កើតការជូនដំណឹងអំពីការបិទដោយស្វ័យប្រវត្តិជាមួយនឹង HTML Popover", ព្រីធី បើក UI Popover API Explainer “Pop (over) the Balloons”, John Rhea "ការកំណត់ទីតាំងយុថ្កា CSS", Juan Diego Rodríguez
MDN ក៏ផ្តល់ជូននូវឯកសារបច្ចេកទេសដ៏ទូលំទូលាយសម្រាប់ Popover API ផងដែរ។
