Source

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

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

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

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

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

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

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

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

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ឧទាហរណ៍

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

ខោតឹង កម្រិតបន្ទាប់ keffiyeh អ្នកប្រហែលជា មិនធ្លាប់ឮពីពួកគេ។ ស្តង់រូបថតពុកចង្ការឆៅ denim letterpress vegan messenger bag stumptown ។ Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit សំលៀកបំពាក់អាមេរិច មាន terry richardson vinyl chambray ។ ពុកចង្ការ, cardigans banh mi lomo thundercats. តៅហ៊ូ biodiesel williamsburg marfa, 4 Loko mcsweeney's cleanse vegan chambray ។ សិប្បករដ៏គួរឱ្យអស់សំណើចមួយរូប ដែលមិនថាជា keytar អ្វីក៏ដោយ ធនាគារ scenester farm-to-table banksy Austin twitter គ្រប់គ្រង freegan cred raw denim មេរោគកាហ្វេដើមតែមួយ។

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

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

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

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

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

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

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

$('#example').tooltip(options)
ហូរហៀរ autoនិងscroll

ទីតាំងព័ត៌មានជំនួយព្យាយាមផ្លាស់ប្តូរដោយស្វ័យប្រវត្តិនៅពេលដែលកុងតឺន័រមេមាន overflow: autoឬ overflow: scrollចូលចិត្តរបស់យើង .table-responsiveប៉ុន្តែនៅតែរក្សាទីតាំងរបស់ទីតាំងដើម។ ដើម្បីដោះស្រាយ សូមកំណត់ boundaryជម្រើសទៅអ្វីផ្សេងក្រៅពីតម្លៃលំនាំដើម 'scrollParent'ដូចជា 'window'៖

$('#example').tooltip({ boundary: 'window' })

សម្គាល់

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

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

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

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

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ធាតុពិការ

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

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
ចលនា ប៊ូលីន ពិត អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅព័ត៌មានជំនួយ
ធុង ខ្សែអក្សរ | ធាតុ | មិនពិត មិនពិត

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'hover'ដោយខ្លួនវាផ្ទាល់នឹងផ្តល់លទ្ធផលនៅក្នុងព័ត៌មានជំនួយដែលមិនអាចត្រូវបានកេះតាមរយៈក្តារចុច ហើយគួរតែត្រូវបានប្រើលុះត្រាតែមានវិធីសាស្ត្រជំនួសសម្រាប់ការបញ្ជូនព័ត៌មានដូចគ្នាសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។
អុហ្វសិត លេខ | ខ្សែអក្សរ 0 អុហ្វសិតនៃព័ត៌មានជំនួយទាក់ទងនឹងគោលដៅរបស់វា។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper.js ។
ទីតាំងធ្លាក់ចុះ ខ្សែអក្សរ | អារេ 'ត្រឡប់' អនុញ្ញាតឱ្យបញ្ជាក់ទីតាំងណាដែល Popper នឹងប្រើនៅពេលត្រលប់ក្រោយ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអាកប្បកិរិយា របស់ Popper.js
ព្រំដែន ខ្សែអក្សរ | ធាតុ 'scrollParent' ហួសព្រំដែនកំណត់នៃព័ត៌មានជំនួយ។ ទទួលយកតម្លៃនៃ 'viewport', 'window', 'scrollParent', ឬឯកសារយោង HTMLElement (JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើលឯកសារ PreventOverflow របស់ Popper.js ។

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

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

វិធីសាស្រ្ត

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

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

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

$().tooltip(options)

ភ្ជាប់ឧបករណ៍ដោះស្រាយព័ត៌មានជំនួយទៅនឹងបណ្តុំធាតុ។

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

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

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('dispose')

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

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

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

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
show.bs.ព័ត៌មានជំនួយ ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
show.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ព័ត៌មាន​ជំនួយ​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS បញ្ចប់)។
hide.bs.tooltip ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
hidden.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញ នៅពេលដែលព័ត៌មានជំនួយបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។
inserted.bs.tooltip ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់បន្ទាប់ពី show.bs.tooltipព្រឹត្តិការណ៍ នៅពេលដែលគំរូព័ត៌មានជំនួយត្រូវបានបន្ថែមទៅ DOM ។ 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})