របៀបប្រើប្រាស់ Tooltip នៅក្នុង Bootstrap

Tooltip គឺជាលក្ខណៈសម្បត្តិមួយស្ថិតនៅក្នុង Cascading Style Sheet (CSS) ដែលវាមានមុខងារសំរាប់បង្ហាញព័ត៌មានបន្ថែមដោយការផុសជាអក្សរ រឺ ជាអ្វីផ្សេងចេញមកដោយការប្រើប្រាស់កណ្ដុរ (mouse) ទៅចង្អុលនៅលើទីតាំង រឺ ពាក្យនោះ ។ ប៉ុន្តែ ថ្ងៃនេះយើងខ្ញុំសូមលើកយកការប្រើប្រាស់ Tooltip ជាមួយនឹងបណ្ណាល័យ (Library) របស់ CSS គឺ Bootstrap ដែលវាមានលក្ខណៈងាយស្រួលដោយយើងគ្រាន់តែហៅនូវក្លាស (class) ដែលមានស្រាប់នៅក្នុង Bootstrap យកមកប្រើប្រាស់តែម្ដង ។

ម្យ៉ាងវិញទៀត រាល់ការប្រើប្រាស់ Tooltip គឺត្រូវប្រើជាមួយភាសា JQuery ដែលវាជាបណ្ណាល័យរបស់ភាសា Javascript ដើម្បីងាយស្រួលក្នុងការដាក់ទីតាំងរបស់ Tooltip ។

១) ការប្រើប្រាស់ Tooltip ជាមួយ Bootstrap

យើងត្រូវទាញយក Bootstrap មកដាក់ក្នុងកន្លែងផ្ទុកឯកសារ (folder) ជាមុនសិន រឺ ក៏អាចប្រើផ្ទាល់ជាមួយអ៊ិនធឺណេត ។ សូមមើលរូបខាងក្រោម ៖

• បន្ទាត់ទី៨ និងទី១១ គឺយើងប្រើប្រាស់ Bootstrap ពីក្នុងកន្លែងផ្ទុកឯកសារ (folder)
• បន្ទាត់ទី៩ និងទី១០ គឺយើងប្រើប្រាស់ Bootstrap ដោយផ្ទាល់ពីអ៊ិនធឺណេត (ប្រើពេលមានអ៊ិនធឺណេត)

Tooltip មាន ៤ ប្រភេទ គឺឆ្វេង ស្ដាំ លើ និងក្រោម។ ខាងក្រោមនេះជាប្រភេទនៃ Tooltip :

ប្រភពពី ៖ www.getbootstrap.com

កូដនៃប្រភេទ Tooltip ខាងលើ៖

• .container គឺជា class មួយសំរាប់ផ្ទុកនូវទិន្នន័យទាំងមូល
• data-toggle =”tooltip” គឺជាលក្ខណៈសម្បត្តិដែលបញ្ជាក់ថាវាជាប្រភេទ Tooltip
• data-placement=”left” សំរាប់បញ្ជាក់ថា Tooltip នេះគឺស្ថិតនៅខាងឆ្វេងពាក្យ
• data-placement=”top” សំរាប់បញ្ជាក់ថា Tooltip នេះគឺស្ថិតនៅខាងលើពាក្យ
• data-placement=”bottom” សំរាប់បញ្ជាក់ថា Tooltip នេះគឺស្ថិតនៅខាងក្រោមពាក្យ
• data-placement=”right” សំរាប់បញ្ជាក់ថា Tooltip នេះគឺស្ថិតនៅខាងស្ដាំពាក្យ
• title គឺសំរាប់ផ្ទុកពាក្យដែលយើងចង់បង្ហាញនៅក្នុង Tooltip

នៅត្រង់បន្ទាត់ទី៣៣ ដល់៣៧ គឺជាកូដរបស់ JQuery សំរាប់បង្ហាញប្រភេទ Tooltip តាមរយៈ data-toggle=”tooltip” ប្រសិនបើគ្មានកូដនេះ Tooltip មិនអាចដំនើរការទេ ។

២) លទ្ធផល

បន្ទាប់ពីបានសរសេរកូដរួចរាល់ហើយយើងនឹងបានលទ្ធផលដូចខាងក្រោម ៖

• Tooltip ខាងឆ្វេង

• Tooltip ខាងលើ

• Tooltip ខាងក្រោម

• Tooltip ខាងស្ដាំ

សូមចុចពាក្យ ស្វែងយល់បន្ថែម ដើម្បីយល់ដឹងបន្ថែមអំពី Tooltip ។ សូមអរគុណ!!

ប្រភពដើម