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

Sross Viech

16 Oct 2016

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 មិនអាចដំនើរការទេ ។