ព័ត៌មានជំនួយ

ឧទាហរណ៍

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="ព័ត៌មានជំនួយនៅខាងលើ">
  ព័ត៌មានជំនួយនៅខាងលើ
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="ព័ត៌មានជំនួយនៅខាងក្រោម">
  ព័ត៌មានជំនួយនៅខាងក្រោម
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="ព័ត៌មានជំនួយនៅខាងស្តាំ">
  ព័ត៌មានជំនួយនៅខាងស្តាំ
</button>

        

 
<button type="button" class="cgds btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="ព័ត៌មានជំនួយនៅខាងឆ្វេង">
  ព័ត៌មានជំនួយនៅខាងឆ្វេង
</button>

        

ធាតុផ្សំ

1. ប្រអប់៖ ព័ត៌មានជំនួយមានទម្រង់ជាប្រអប់ដែលមានផ្ទុកព័ត៌មាននៅខាងក្នុង។
2. ខ្លឹមសារ៖ ជាអក្សរនៅក្នុងប្រអប់សម្រាប់ប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងរបស់ព័ត៌មានជំនួយ។

គម្លាត

នៅក្នុងព័ត៌មានជំនួយ
រក្សាគម្លាតយ៉ាងតិច 16px នៅជុំវិញគែមនៃប្រអប់របស់ព័ត៌មានជំនួយ។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ព័ត៌មានជំនួយគួរតែត្រូវបានប្រើប្រាស់នៅពេល
អ្នកចង់ផ្តល់ព័ត៌មានជំនួយ ឬសេចក្តីណែនាំខ្លីៗសម្រាប់អ្នកប្រើប្រាស់ដែលមិនសូវចេះប្រើប្រាស់គេហទំព័ររបស់អ្នក និងមិនទាន់យល់ច្បាស់ថាធាតុណាមួយមានគោលបំណងអ្វី។

ព័ត៌មានជំនួយមិនគួរត្រូវបានប្រើប្រាស់នៅពេល
នៅពេលដែលព័ត៌មាននោះចាំបាច់ក្នុងការសម្រេចការងារអ្វីមួយ។

គោលការណ៍ណែនាំនៃការរចនា

យកព័ត៌មានជំនួយទៅដាក់កន្លែងដែលមិនជាន់ពីលើខ្លឹមសាររបស់ទំព័រ
នៅពេលដែលអ្នកជ្រើសរើសកន្លែងសម្រាប់ដាក់បង្ហាញព័ត៌មានជំនួយ ត្រូវរើសកន្លែងណាដែលមិននៅពីលើ ឬបិទបាំងខ្លឹមសារសំខាន់។

ព័ត៌មានជំនួយនីមួយៗត្រូវរចនាឱ្យស្រដៀងគ្នានិងស៊ីចង្វាក់គ្នា
ត្រូវរចនាពួកវាឱ្យស្រដៀងគ្នានិងស៊ីចង្វាក់គ្នាដើម្បីឱ្យអ្នកប្រើប្រាស់ងាយស្រួលសម្គាល់ថាវាជាព័ត៌មានជំនួយ។

រចនាឱ្យមានភាពផ្ទុយគ្នានៃពណ៌
ធ្វើបែបនេះដើម្បីរំលេចព័ត៌មានជំនួយដើម្បីឱ្យអ្នកប្រើប្រាស់មើលវាឃើញ។

ខ្នាតសម្រាប់រចនា

$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $gray-600 !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: 1 !default;
$tooltip-padding-y: $spacer * .5 !default;
$tooltip-padding-x: $spacer !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;