For Android device For iOS device
២៧
មីនា

​បង្កើត Tooltip ស្រស់​ស្អាត​ជាមួយ CSS

Tooltip គឺជា​ផ្ទាំង interface បង្ហាញ​ពី​ព័ត៌មាន​ដែល​មាន​លក្ខណៈ​ជាប្រអប់ នៅពេល​អ្នកយក Mouse ដាក់​នៅលើ item ណាមួយ​ដែល​គេបាន​កំណត់​វានឹង​បង្ហាញ ដូចរូប​ខាងក្រោម ៖

ដើម្បី​ទទួលបាននៅ Tooltip ខាងលើ​អ្នកត្រូវអនុវត្តតាម​ដំណាក់​កាលដូច​ខាងក្រោម​៖

១.​បង្កើត HTML File

ដំបូងអ្នកត្រូវ​បង្កើត HTML File ដែល​មាន​ឈ្មោះ source.html ដូចរូប​ខាងក្រោម ៖

ក្រោយពីអ្នកបាន​សរសេរ​កូដដូចរូប​ខាងលើ​រួចហើយវានិង​បង្ហាញ​លទ្ធផល​ដូច​ខាងក្រោម​៖

​កំណត់​ចំណាំ​៖ រូបភាព​  ស្ថិតនៅទីតាំងជាមួយ file Source.html ។

២. កូដ​សម្រាប់​ដាក់ Style ឲ្យ​ពាក្យ សេការីស្វារៈ

នៅ​ខាងក្រោម​នេះជាកូដ​ដែល​យើងបាន​សរសេរ​នៅ​ក្នុង file Source.html ។

រូបទី១៖ កូដ​ក្នុង​ផ្នែក <head> របស់ HTML

រូបទី២៖ កូដ​ក្នុង​ផ្នែក <body>

ក្រោយពេល​ដែល​យើងបានហៅ class (.tooltip) មក​ប្រើ​នៅ​ក្នុង​<a class=”tooltip” href=”#”> វានឹង​បង្ហាញ​លទ្ធផល​ដូចរូប​ខាងក្រោម​៖

៣. កូដ​សម្រាប់​ដាក់ Style ឲ្យ ToolTip

ក្រោយពីបាន​សរសេរ​កូដ stylesheet ជំហានដំបូង (.tooltip class) រួចហើយអ្នកត្រូវបន្ត​សរសេរ​កូដ stylesheet បន្ថែម​ទៀត (ដូចរូប​ខាងក្រោម) ។

ពន្យល់កូដ

.custom គឺជា class មួយ​សម្រាប់​ផ្ដល់​គម្លាតរវាង border និង content របស់ ToolTips ផ្នែក​ខាងលើ​, ខាង​ស្ដាំ​, ខាងក្រោម និង ខាង​ឆ្វេង ។

*  html  a:hover វា​ត្រូវបាន​គេ​ប្រើ ដើម្បី​ឲ្យ property transparent background ដំណើរ​ការ​បានជាមួយ browser IE6 ។

.info (ផ្ទៃ background និង border របស់ ToolTips) នៅ​ខាងក្រោម​នេះជា class សម្រាប់​ដាក់ background និង border របស់ ToolTips ។

Border កោង 

កូដ​ខាងក្រោម​នេះជា property របស់ CSS3 សម្រាប់​ធ្វើ​ឲ្យ​ប្រអប់កោង 5px គ្រប់ជ្រុងទាំងបួន ៖

ស្រមោលប្រអប់ ToolTips

ដើម្បី​ធ្វើ​ឲ្យ tooltips មានស្រមោលយើងត្រូវ​ប្រើ property box-shadow របស់ CSS3 ដូច​ខាងក្រោម ៖

​កំណត់​ចំណាំ​៖

  • webkit-border-radius (ជា property របស់ CSS3 ដំណើរ​ការ​ជាមួយ browser Safari និង Chrome)
  • moz-box-shadow (ជា property របស់ CSS3 ដំណើរ​ការ​ជាមួយ browser Firefox)

​បន្ទាប់ពី​បាន​សរសេរ stylesheet ខាងលើ​រួចហើយអ្នកត្រូវបន្តហៅ class (.custom និង .info) ចូលទៅ​ក្នុង Tag <span class=”custom info”> របស់ HTML ដូច​ខាងក្រោម ៖

​លទ្ធផល​នឹង​បង្ហាញ​ពីរូបរាងរបស់ ToolTips ដូចរូបទី១ (ខាងលើ​ផុត) ។

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ​ច្បាប់​ទី៤១ សម្រាប់​ខែសីហា ឆ្នាំ​២០១២

*** softwareនិង​វីឌីអូ​សម្រាប់​ការអនុវត្ដន៍ ជា​ច្រើន​ទៀតមាន​ក្នុង​ស៊ីឌី​ទស្សនាវដ្ដី​អាន-ANT

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា