រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

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

ឯកសារ និងឧទាហរណ៍សម្រាប់ការបន្ថែមព័ត៌មានជំនួយ Bootstrap ផ្ទាល់ខ្លួនជាមួយ CSS និង JavaScript ដោយប្រើ CSS3 សម្រាប់ចលនា និង data-bs-attributes សម្រាប់ការផ្ទុកចំណងជើងក្នុងតំបន់។

នៅលើទំព័រនេះ។

ទិដ្ឋភាពទូទៅ

អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយជំនួយ៖

  • ព័ត៌មានជំនួយពឹងផ្អែកលើបណ្ណាល័យភាគីទី 3 Popper សម្រាប់ការកំណត់ទីតាំង។ អ្នកត្រូវតែរួមបញ្ចូល popper.min.js មុនពេល bootstrap.js ឬប្រើ bootstrap.bundle.min.js/ bootstrap.bundle.jsដែលមាន Popper ដើម្បីឱ្យព័ត៌មានជំនួយដំណើរការ!
  • ព័ត៌មានជំនួយត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលប្រតិបត្តិការ ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម ពួកវា ដោយខ្លួនឯង
  • ព័ត៌មានជំនួយដែលមានចំណងជើងប្រវែងសូន្យមិនត្រូវបានបង្ហាញទេ។
  • បញ្ជាក់ container: 'body'ដើម្បីជៀសវាងបញ្ហាក្នុងការបង្ហាញនៅក្នុងសមាសធាតុស្មុគ្រស្មាញ (ដូចជាក្រុមបញ្ចូលរបស់យើង ក្រុមប៊ូតុង។ល។)។
  • ការកេះគន្លឹះឧបករណ៍នៅលើធាតុដែលលាក់នឹងមិនដំណើរការទេ។
  • ព័ត៌មានជំនួយសម្រាប់ .disabledឬ disabledធាតុត្រូវតែត្រូវបានកេះនៅលើធាតុរុំ។
  • នៅពេលដែលត្រូវបានកេះចេញពីតំណខ្ពស់ដែលលាតសន្ធឹងច្រើនបន្ទាត់ នោះព័ត៌មានជំនួយនឹងស្ថិតនៅកណ្តាល។ ប្រើ white-space: nowrap;នៅលើរបស់អ្នក <a>ដើម្បីជៀសវាងអាកប្បកិរិយានេះ។
  • ព័ត៌មានជំនួយត្រូវតែលាក់ មុនពេលធាតុដែលត្រូវគ្នារបស់ពួកគេត្រូវបានយកចេញពី DOM ។
  • ព័ត៌មានជំនួយអាចត្រូវបានបង្កឡើងដោយអរគុណចំពោះធាតុមួយនៅក្នុងស្រមោល DOM ។
តាមលំនាំដើម សមាសធាតុនេះប្រើសារធាតុអនាម័យមាតិកាដែលភ្ជាប់មកជាមួយ ដែលដកចេញនូវធាតុ HTML ណាមួយដែលមិនត្រូវបានអនុញ្ញាតយ៉ាងច្បាស់។ សូមមើល ផ្នែកអនាម័យនៅក្នុងឯកសារ JavaScript របស់យើង សម្រាប់ព័ត៌មានលម្អិតបន្ថែម។
ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motionសំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។

ទទួលបានទាំងអស់នោះ? ល្អណាស់ តោះមើលពីរបៀបដែលពួកគេធ្វើការជាមួយនឹងឧទាហរណ៍មួយចំនួន។

ឧទាហរណ៍៖ បើកដំណើរការព័ត៌មានជំនួយនៅគ្រប់ទីកន្លែង

វិធីមួយដើម្បីចាប់ផ្តើមព័ត៌មានជំនួយទាំងអស់នៅលើទំព័រមួយគឺជ្រើសរើសពួកវាតាម data-bs-toggleគុណលក្ខណៈរបស់ពួកគេ៖

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ឧទាហរណ៍

ដាក់លើតំណខាងក្រោមដើម្បីមើលព័ត៌មានជំនួយ៖

អត្ថបទកន្លែងដាក់ដើម្បីបង្ហាញ តំណភ្ជាប់ក្នុងជួរ មួយចំនួន ជាមួយនឹងព័ត៌មានជំនួយ។ នេះគ្រាន់តែជាការបំពេញ គ្មានឃាតករទេ។ ខ្លឹមសារ​ដែល​ដាក់​នៅ​ទីនេះ​គ្រាន់​តែ​ធ្វើ​ត្រាប់​តាម​វត្តមាន​នៃ ​អត្ថបទ​ពិត ។ ហើយអ្វីទាំងអស់នោះគ្រាន់តែដើម្បីផ្តល់ឱ្យអ្នកនូវគំនិតអំពីរបៀបដែលព័ត៌មានជំនួយនឹងមើលទៅនៅពេលប្រើក្នុងស្ថានភាពជាក់ស្តែង។ ដូច្នេះសង្ឃឹមថាឥឡូវនេះ អ្នកបានឃើញពីរបៀបដែល ព័ត៌មានជំនួយទាំងនេះនៅលើតំណភ្ជាប់ អាចដំណើរការក្នុងការអនុវត្តជាក់ស្តែង នៅពេលដែលអ្នកប្រើពួកវានៅលើ គេហទំព័រ ឬគម្រោង ផ្ទាល់ខ្លួនរបស់អ្នក ។

អូសលើប៊ូតុងខាងក្រោម ដើម្បីមើលទិសដៅជំនួយទាំងបួន៖ ខាងលើ ស្តាំ បាត និងឆ្វេង។ ទិសដៅត្រូវបានឆ្លុះបញ្ចាំងនៅពេលប្រើ Bootstrap ក្នុង RTL ។

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

ហើយជាមួយនឹងការបន្ថែម HTML ផ្ទាល់ខ្លួន៖

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

ជាមួយ SVG៖

សាស

អថេរ

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

ការប្រើប្រាស់

កម្មវិធីជំនួយព័ត៌មានជំនួយបង្កើតមាតិកា និងការសម្គាល់តាមតម្រូវការ ហើយតាមលំនាំដើមដាក់ព័ត៌មានជំនួយបន្ទាប់ពីធាតុគន្លឹះរបស់ពួកគេ។

កេះព័ត៌មានជំនួយតាមរយៈ JavaScript៖

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ហូរហៀរ autoនិងscroll

ទីតាំងព័ត៌មានជំនួយព្យាយាមផ្លាស់ប្តូរដោយស្វ័យប្រវត្តិនៅពេលដែល កុងតឺន័រមេមាន ឬ overflow: autoចូលចិត្ត overflow: scrollរបស់យើង .table-responsiveប៉ុន្តែនៅតែរក្សាទីតាំងរបស់ទីតាំងដើម។ ដើម្បី​ដោះស្រាយ​បញ្ហា​នេះ សូម​កំណត់ boundary​ជម្រើស (សម្រាប់​ការ​កែប្រែ​ត្រឡប់​ដោយ​ប្រើ popperConfig​ជម្រើស) ទៅ HTMLElement ណាមួយ​ដើម្បី​បដិសេធ​តម្លៃ​លំនាំដើម 'clippingParents'ដូចជា document.body៖

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

សម្គាល់

ការសម្គាល់ដែលត្រូវការសម្រាប់ព័ត៌មានជំនួយគឺគ្រាន់តែជា dataគុណលក្ខណៈ និង titleនៅលើធាតុ HTML ដែលអ្នកចង់មានព័ត៌មានជំនួយ។ ការសម្គាល់ដែលបានបង្កើតនៃព័ត៌មានជំនួយគឺសាមញ្ញជាង ទោះបីជាវាទាមទារទីតាំង (តាមលំនាំដើម កំណត់ topដោយកម្មវិធីជំនួយ)។

ការធ្វើឱ្យព័ត៌មានជំនួយដំណើរការសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច និងជំនួយបច្ចេកវិទ្យា

អ្នក​គួរ​តែ​បន្ថែម​ព័ត៌មាន​ជំនួយ​ទៅ​ធាតុ HTML ដែល​ជា​ប្រពៃណី​អាច​ផ្តោត​លើ​ក្ដារចុច និង​អន្តរកម្ម​បាន (ដូចជា​តំណ ឬ​ទម្រង់​គ្រប់គ្រង)។ ទោះបីជាធាតុ HTML បំពាន (ដូចជា <span>s) អាចផ្តោតបានដោយការបន្ថែម tabindex="0"គុណលក្ខណៈក៏ដោយ វានឹងបន្ថែមការបញ្ឈប់ផ្ទាំងដែលអាចរំខាន និងច្របូកច្របល់លើធាតុដែលមិនអន្តរកម្មសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច ហើយបច្ចេកវិទ្យាជំនួយភាគច្រើនបច្ចុប្បន្នមិនប្រកាសព័ត៌មានជំនួយក្នុងស្ថានភាពនេះទេ។ លើសពីនេះ កុំពឹងផ្អែកទាំងស្រុងទៅលើ hoverគន្លឹះសម្រាប់ព័ត៌មានជំនួយរបស់អ្នក ព្រោះវានឹងធ្វើឱ្យព័ត៌មានជំនួយរបស់អ្នកមិនអាចទៅរួចសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ធាតុពិការ

ធាតុ​ដែល​មាន disabled​គុណលក្ខណៈ​មិន​មាន​អន្តរកម្ម​ទេ មានន័យថា​អ្នក​ប្រើ​មិន​អាច​ផ្ដោត​លើ​អេក្រង់ ឬ​ចុច​ពួកវា​ដើម្បី​កេះ​ព័ត៌មាន​ជំនួយ (ឬ popover)។ ជាដំណោះស្រាយមួយ អ្នកនឹងចង់កេះព័ត៌មានជំនួយពីក្រដាសរុំ <div>ឬ <span>បង្កើតតាមឧត្ដមគតិក្តារចុចដែលអាចផ្តោតបានដោយប្រើ tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-bs-ដូចក្នុង data-bs-animation="". ត្រូវប្រាកដថាផ្លាស់ប្តូរប្រភេទករណីនៃឈ្មោះជម្រើសពី camelCase ទៅ kebab-case នៅពេលឆ្លងកាត់ជម្រើសតាមរយៈគុណលក្ខណៈទិន្នន័យ។ ឧទាហរណ៍ជំនួសឱ្យការប្រើ data-bs-customClass="beautifier"ប្រើ data-bs-custom-class="beautifier"។

ចំណាំថាសម្រាប់ហេតុផលសុវត្ថិភាព sanitize, sanitizeFn, និង allowListជម្រើសមិនអាចត្រូវបានផ្គត់ផ្គង់ដោយប្រើលក្ខណៈទិន្នន័យ។
ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
animation ប៊ូលីន true អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅព័ត៌មានជំនួយ
container ខ្សែអក្សរ | ធាតុ | មិនពិត false

បន្ថែមព័ត៌មានជំនួយទៅធាតុជាក់លាក់មួយ។ ឧទាហរណ៍៖ container: 'body'. ជម្រើសនេះមានប្រយោជន៍ជាពិសេសក្នុងការដែលវាអនុញ្ញាតឱ្យអ្នកដាក់ព័ត៌មានជំនួយនៅក្នុងលំហូរនៃឯកសារនៅជិតធាតុកេះ - ដែលនឹងការពារព័ត៌មានជំនួយមិនឱ្យអណ្តែតចេញពីធាតុកេះកំឡុងពេលផ្លាស់ប្តូរទំហំបង្អួច។
delay លេខ | វត្ថុ 0

ពន្យារពេលបង្ហាញ និងលាក់ព័ត៌មានជំនួយ (ms) - មិនអនុវត្តចំពោះប្រភេទគន្លឹះដោយដៃទេ។

ប្រសិនបើលេខត្រូវបានផ្គត់ផ្គង់ ការពន្យារពេលត្រូវបានអនុវត្តចំពោះទាំងលាក់/បង្ហាញ

រចនាសម្ព័ន្ធវត្ថុគឺ៖delay: { "show": 500, "hide": 100 }
html ប៊ូលីន false

អនុញ្ញាត HTML នៅក្នុងព័ត៌មានជំនួយ។

ប្រសិនបើជាការពិត ស្លាក HTML នៅក្នុងព័ត៌មានជំនួយ titleនឹងត្រូវបានបង្ហាញនៅក្នុងព័ត៌មានជំនួយ។ ប្រសិនបើមិនពិត innerTextទ្រព្យសម្បត្តិនឹងត្រូវបានប្រើដើម្បីបញ្ចូលខ្លឹមសារទៅក្នុង DOM ។

ប្រើអត្ថបទប្រសិនបើអ្នកព្រួយបារម្ភអំពីការវាយប្រហារ XSS ។
placement ខ្សែអក្សរ | មុខងារ 'top'

របៀបកំណត់ទីតាំងឧបករណ៍ជំនួយ - auto | កំពូល | បាត | ឆ្វេង | ត្រឹមត្រូវ។
នៅពេលដែល autoត្រូវបានបញ្ជាក់ វានឹងតម្រង់ទិសគន្លឹះឧបករណ៍ឡើងវិញដោយថាមវន្ត។

នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់ការដាក់ វាត្រូវបានហៅដោយប្រើថ្នាំង DOM ជំនួយជាអាគុយម៉ង់ដំបូងរបស់វា និងធាតុដែលបង្កដោយថ្នាំង DOM ជាទីពីររបស់វា។ បរិបទ thisត្រូវបានកំណត់ទៅឧទាហរណ៍ព័ត៌មានជំនួយ។
selector ខ្សែអក្សរ | មិនពិត false ប្រសិនបើឧបករណ៍ជ្រើសរើសត្រូវបានផ្តល់ឱ្យ វត្ថុជំនួយនឹងត្រូវបានផ្ទេរទៅគោលដៅដែលបានបញ្ជាក់។ នៅក្នុងការអនុវត្ត វាត្រូវបានប្រើដើម្បីអនុវត្តព័ត៌មានជំនួយផងដែរចំពោះធាតុ DOM ( jQuery.onជំនួយ) ដែលបានបន្ថែមថាមវន្ត។ សូមមើល នេះ និង ឧទាហរណ៍ព័ត៌មាន ។
template ខ្សែអក្សរ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

មូលដ្ឋាន HTML ដើម្បីប្រើនៅពេលបង្កើតព័ត៌មានជំនួយ។

ព័ត៌មានជំនួយ titleនឹងត្រូវបានចាក់ចូលទៅក្នុង .tooltip-inner.

.tooltip-arrowនឹងក្លាយជាព្រួញរបស់ឧបករណ៍។

ធាតុរុំខាងក្រៅបំផុតគួរតែមាន .tooltipថ្នាក់ និង role="tooltip".
title ខ្សែអក្សរ | ធាតុ | មុខងារ ''

តម្លៃចំណងជើងលំនាំដើម ប្រសិនបើ titleគុណលក្ខណៈមិនមានវត្តមាន។

ប្រសិនបើមុខងារមួយត្រូវបានផ្តល់ឱ្យ វានឹងត្រូវបានគេហៅជាមួយនឹង thisឯកសារយោងរបស់វាទៅកាន់ធាតុដែលព័ត៌មានជំនួយត្រូវបានភ្ជាប់។
trigger ខ្សែអក្សរ 'hover focus'

របៀបដែលព័ត៌មានជំនួយត្រូវបានកេះ - ចុច | hover | ផ្តោតអារម្មណ៍ | ហត្ថកម្ម។ អ្នកអាចឆ្លងកាត់គន្លឹះជាច្រើន; បំបែកពួកវាដោយចន្លោះមួយ។

'manual'បង្ហាញថាព័ត៌មានជំនួយនឹងត្រូវបានកេះតាមកម្មវិធីតាមរយៈ .show(), .hide()និង .toggle()វិធីសាស្រ្ត; តម្លៃ​នេះ​មិន​អាច​ត្រូវ​បាន​រួម​បញ្ចូល​ជាមួយ​នឹង​កេះ​ផ្សេង​ទៀត​ទេ។

'hover'ដោយខ្លួនវាផ្ទាល់នឹងផ្តល់លទ្ធផលនៅក្នុងព័ត៌មានជំនួយដែលមិនអាចត្រូវបានកេះតាមរយៈក្តារចុច ហើយគួរតែត្រូវបានប្រើលុះត្រាតែមានវិធីសាស្ត្រជំនួសសម្រាប់ការបញ្ជូនព័ត៌មានដូចគ្នាសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។
fallbackPlacements អារេ ['top', 'right', 'bottom', 'left'] កំណត់​ការ​ដាក់​ជំនួស​ដោយ​ផ្ដល់​បញ្ជី​នៃ​ការ​ដាក់​ក្នុង​អារេ (តាម​លំដាប់​តាម​ចំណូល​ចិត្ត)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអាកប្បកិរិយា របស់ Popper
boundary ខ្សែអក្សរ | ធាតុ 'clippingParents' ព្រំដែនកម្រិតលើសចំណុះនៃព័ត៌មានជំនួយ (អនុវត្តតែចំពោះឧបករណ៍កែប្រែទប់ស្កាត់ការហូរលើសរបស់ Popper ប៉ុណ្ណោះ)។ តាមលំនាំដើម វាជា 'clippingParents'និងអាចទទួលយកឯកសារយោង HTMLElement (តាមរយៈ JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារ detectOverflow របស់ Popper ។
customClass ខ្សែអក្សរ | មុខងារ ''

បន្ថែមថ្នាក់ទៅព័ត៌មានជំនួយនៅពេលវាត្រូវបានបង្ហាញ។ ចំណាំថាថ្នាក់ទាំងនេះនឹងត្រូវបានបន្ថែមបន្ថែមលើថ្នាក់ណាមួយដែលបានបញ្ជាក់នៅក្នុងគំរូ។ ដើម្បីបន្ថែមថ្នាក់ច្រើន សូមបំបែកវាដោយដកឃ្លា៖ 'class-1 class-2'.

អ្នកក៏អាចឆ្លងកាត់មុខងារដែលគួរត្រឡប់ខ្សែតែមួយដែលមានឈ្មោះថ្នាក់បន្ថែម។
sanitize ប៊ូលីន true បើក ឬបិទការធ្វើអនាម័យ។ ប្រសិនបើបានធ្វើឱ្យសកម្ម 'template'និង 'title'ជម្រើសនឹងត្រូវបានសម្អាត។ សូមមើល ផ្នែកអនាម័យនៅក្នុងឯកសារ JavaScript របស់យើង ។
allowList វត្ថុ តម្លៃ​លំនាំដើម វត្ថុដែលមានគុណលក្ខណៈ និងស្លាកដែលបានអនុញ្ញាត
sanitizeFn null | មុខងារ null នៅទីនេះអ្នកអាចផ្គត់ផ្គង់មុខងារអនាម័យផ្ទាល់ខ្លួនរបស់អ្នក។ វាអាចមានប្រយោជន៍ ប្រសិនបើអ្នកចូលចិត្តប្រើបណ្ណាល័យដែលខិតខំប្រឹងប្រែងដើម្បីអនុវត្តអនាម័យ។
offset អារេ | ខ្សែអក្សរ | មុខងារ [0, 0]

អុហ្វសិតនៃព័ត៌មានជំនួយទាក់ទងនឹងគោលដៅរបស់វា។ អ្នក​អាច​ឆ្លង​ខ្សែ​ក្នុង​គុណលក្ខណៈ​ទិន្នន័យ​ដែល​មាន​តម្លៃ​បំបែក​ដោយ​សញ្ញាក្បៀស​ដូចជា៖data-bs-offset="10,20"

នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់អុហ្វសិត វាត្រូវបានហៅជាមួយវត្ថុដែលមានការដាក់ popper ឯកសារយោង និង popper rects ជាអាគុយម៉ង់ដំបូងរបស់វា។ ថ្នាំង DOM ធាតុកេះត្រូវបានឆ្លងកាត់ជាអាគុយម៉ង់ទីពីរ។ អនុគមន៍ត្រូវតែត្រឡប់អារេដែលមានលេខពីរ៖ .[skidding, distance]

សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper ។
popperConfig null | វត្ថុ | មុខងារ null

ដើម្បីផ្លាស់ប្តូរការកំណត់ Popper លំនាំដើមរបស់ Bootstrap សូមមើល ការកំណត់រចនាសម្ព័ន្ធរបស់ Popper ។

នៅពេលដែលមុខងារមួយត្រូវបានប្រើដើម្បីបង្កើតការកំណត់រចនាសម្ព័ន្ធ Popper វាត្រូវបានហៅជាមួយវត្ថុដែលមានការកំណត់រចនាសម្ព័ន្ធ Popper លំនាំដើមរបស់ Bootstrap ។ វាជួយអ្នកប្រើ និងបញ្ចូលលំនាំដើមជាមួយការកំណត់ផ្ទាល់ខ្លួនរបស់អ្នក។ មុខងារត្រូវតែត្រឡប់វត្ថុកំណត់រចនាសម្ព័ន្ធសម្រាប់ Popper ។

គុណលក្ខណៈទិន្នន័យសម្រាប់ព័ត៌មានជំនួយបុគ្គល

ជម្រើសសម្រាប់ព័ត៌មានជំនួយបុគ្គលអាចត្រូវបានបញ្ជាក់ជាជម្រើសតាមរយៈការប្រើប្រាស់គុណលក្ខណៈទិន្នន័យ ដូចដែលបានពន្យល់ខាងលើ។

ការប្រើប្រាស��មុខងារជាមួយpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

វិធីសាស្រ្ត

វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល

វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើស​ពី​នេះ​ទៀត ការ​ហៅ​តាម​វិធី​សាស្ត្រ​លើ ​សមាសភាគ​អន្តរកាល​នឹង​ត្រូវ​បាន​មិន​អើពើ ។

សូមមើលឯកសារ JavaScript របស់យើងសម្រាប់ព័ត៌មានបន្ថែម ។

បង្ហាញ

បង្ហាញព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរស័ព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧទាហរណ៍ មុនពេល shown.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។ ព័ត៌មានជំនួយដែលមានចំណងជើងប្រវែងសូន្យមិនត្រូវបានបង្ហាញទេ។

tooltip.show()

លាក់

លាក់ព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានលាក់ (ឧ. មុនពេល hidden.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។

tooltip.hide()

បិទបើក

បិទបើកព័ត៌មានជំនួយរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលព័ត៌មានជំនួយត្រូវបានបង្ហាញ ឬលាក់shown.bs.tooltip ( ឧទាហរណ៍ មុនពេល hidden.bs.tooltipព្រឹត្តិការណ៍កើតឡើង)។ នេះ​ត្រូវ​បាន​គេ​ចាត់​ទុក​ថា​ជា​ការ​កេះ "សៀវភៅ​ដៃ" នៃ​ព័ត៌មាន​ជំនួយ។

tooltip.toggle()

បោះចោល

លាក់ និងបំផ្លាញព័ត៌មានជំនួយរបស់ធាតុ (លុបទិន្នន័យដែលបានរក្សាទុកនៅលើធាតុ DOM) ។ ព័ត៌មានជំនួយដែលប្រើការផ្ទេរសិទ្ធិ (ដែលត្រូវបានបង្កើតដោយប្រើ ជម្រើសselector ) មិនអាចត្រូវបានបំផ្លាញដោយឡែកៗពីគ្នាលើធាតុកេះបន្តបន្ទាប់ឡើយ ។

tooltip.dispose()

បើក

ផ្តល់ព័ត៌មានជំនួយរបស់ធាតុមួយ ដែលមានសមត្ថភាពបង្ហាញ។ ព័ត៌មានជំនួយត្រូវបានបើកតាមលំនាំដើម។

tooltip.enable()

បិទ

ដកសមត្ថភាពសម្រាប់ព័ត៌មានជំនួយរបស់ធាតុដែលត្រូវបង្ហាញ។ ព័ត៌មានជំនួយនឹងអាចបង្ហាញបានលុះត្រាតែវាត្រូវបានបើកដំណើរការឡើងវិញ។

tooltip.disable()

បិទបើក

បិទ/បើក​សមត្ថភាព​សម្រាប់​ព័ត៌មានជំនួយ​របស់​ធាតុ​ដើម្បី​បង្ហាញ ឬ​លាក់។

tooltip.toggleEnabled()

ធ្វើបច្ចុប្បន្នភាព

ធ្វើបច្ចុប្បន្នភាពទីតាំងនៃព័ត៌មានជំនួយរបស់ធាតុមួយ។

tooltip.update()

getInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ព័ត៌មានជំនួយដែលភ្ជាប់ជាមួយធាតុ DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ព័ត៌មានជំនួយដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

ព្រឹត្តិការណ៍

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.tooltip ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
shown.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ព័ត៌មាន​ជំនួយ​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS បញ្ចប់)។
hide.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
hidden.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលព័ត៌មានជំនួយបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
inserted.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់បន្ទាប់ពី show.bs.tooltipព្រឹត្តិការណ៍ នៅពេលដែលគំរូព័ត៌មានជំនួយត្រូវបានបន្ថែមទៅ DOM ។ 
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()