Source

Tooltips

ဒေသန္တရ ခေါင်းစဉ် သိုလှောင်မှုအတွက် CSS3 နှင့် ဒေတာ-ရည်ညွှန်းချက်များ အတွက် CSS3 ကို အသုံးပြု၍ စိတ်ကြိုက် Bootstrap ကိရိယာ အကြံပြုချက်များကို ထည့်သွင်းခြင်းအတွက် စာရွက်စာတမ်းများနှင့် ဥပမာများ။

ခြုံငုံသုံးသပ်ချက်

tooltip plugin ကိုအသုံးပြုသည့်အခါသိရန်အချက်များ

  • ကိရိယာအကြံပြုချက်များသည် နေရာချထားမှုအတွက် ပြင်ပအဖွဲ့အစည်း စာကြည့်တိုက် Popper.js ကို အားကိုးသည် ။ bootstrap.js မတိုင်မီ popper.min.js သို့မဟုတ် ကိရိယာ ဆိုင်ရာ အကြံပြုချက်များ အလုပ်လုပ်ရန်အတွက် Popper.js ပါရှိသော bootstrap.bundle.min.js/ ကို အသုံးပြု ရပါမည် ။bootstrap.bundle.js
  • အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။
  • ကိရိယာအကြံပြုချက်များသည် စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက် ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် စတင်ရပါမည် ။
  • သုညအလျား ခေါင်းစဉ်ပါရှိသော ကိရိယာအကြံပြုချက်များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။
  • ပိုမိုရှုပ်ထွေးသော အစိတ်အပိုင်းများတွင် တင်ဆက်ခြင်းပြဿနာများကို ရှောင်ရှားရန် ( ကျွန်ုပ်တို့၏ container: 'body'ထည့်သွင်းမှုအုပ်စုများ၊ ခလုတ်အဖွဲ့များ စသည်ဖြင့်) ကို ရှောင်ရှားရန် သတ်မှတ်ပါ။
  • ဝှက်ထားသောဒြပ်စင်များပေါ်ရှိ ကိရိယာအကြံပြုချက်များကို အစပျိုးခြင်းသည် အလုပ်မဖြစ်ပါ။
  • ကိရိယာဆိုင်ရာ အကြံပြုချက်များ .disabledသို့မဟုတ် disabledဒြပ်စင်များကို wrapper ဒြပ်စင်ပေါ်တွင် အစပျိုးရပါမည်။
  • လိုင်းများစွာကို ချဲ့ထွင်သည့် ဟိုက်ပါလင့်ခ်များမှ အစပျိုးသောအခါ၊ ကိရိယာအကြံပြုချက်များကို ဗဟိုပြုပါမည်။ ဤအပြုအမူကိုရှောင်ရှားရန် white-space: nowrap;သင့်တွင် အသုံးပြု ပါ။<a>
  • ၎င်းတို့၏ သက်ဆိုင်ရာ ဒြပ်စင်များကို DOM မှ မဖယ်ရှားမီ ကိရိယာအကြံပြုချက်များကို ဝှက်ထားရပါမည်။
  • အရိပ် DOM အတွင်းရှိ အစိတ်အပိုင်းတစ်ခုကြောင့် ကိရိယာအကြံပြုချက်များကို အစပျိုးနိုင်သည်။

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

ဒါအကုန်ရပြီလား? ကောင်းတယ်၊ သူတို့ ဘယ်လိုအလုပ်လုပ်သလဲ ကြည့်ရအောင်။

ဥပမာ- ကိရိယာအကြံပြုချက်များကို နေရာတိုင်းတွင် ဖွင့်ပါ။

စာမျက်နှာတစ်ခုပေါ်ရှိ tooltips အားလုံးကို အစပြုရန် နည်းလမ်းတစ်ခုမှာ ၎င်းတို့၏ data-toggleအရည်အချင်းဖြင့် ၎င်းတို့ကို ရွေးချယ်ရန်ဖြစ်သည်-

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

ဥပမာများ

ကိရိယာဆိုင်ရာ အကြံပြုချက်များကို ကြည့်ရှုရန် အောက်ပါလင့်ခ်များကို နှိပ်ပါ။

တင်းတင်းကျပ်ကျပ် ဘောင်းဘီနောက်ထပ် keffiyeh သူတို့အကြောင်း ကို သင် မကြားမိဖူးဘူး။ ဓါတ်ပုံဆိုင်တွင် မုတ်ဆိတ်စိမ်းစိမ်း denim letterpress vegan messenger bag ငုတ်တို။ Farm-to-table seitan၊ mcsweeney ၏ ရေရှည်တည်တံ့သော quinoa 8-bit အမေရိကန်အ၀တ်အထည် တွင် terry richardson vinyl chambray ပါရှိသည်။ မုတ်ဆိတ်ငုတ်တို၊ cardigans banh mi lomo မိုးကြိုးပစ်။ တို့ဟူး ဇီဝဒီဇယ် Williamsburg marfa၊ လေးလုံးသော loko mcsweeney ၏ သန့်စင်သော vegan chambray။ တကယ်ကို အထင်ကြီးစရာကောင်းတဲ့ သော့တာပဲဖြစ်ဖြစ်၊ လယ်ကွင်းကနေ စားပွဲပေါ်မှာ ဘဏ်လုပ်ငန်းဖြစ်တဲ့ Austin twitter က freegan cred 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 မှတဆင့် tooltip ကိုအစပျိုးပါ

$('#example').tooltip(options)
လျှံ autoလျက်scroll

overflow: autoကိရိယာအကြံပြုချက် အနေအထားသည် မိဘကွန်တိန်နာတစ်ခုရှိ သို့မဟုတ် overflow: scrollကျွန်ုပ်တို့ကဲ့သို့ ဖြစ်နေသည့်အခါ အလိုအလျောက် ပြောင်းလဲရန် ကြိုးပမ်း .table-responsiveသော်လည်း မူလနေရာချထားမှု၏ အနေအထားကို ဆက်လက်ထားရှိဆဲဖြစ်သည်။ ဖြေရှင်းရန်၊ boundarydefault value မှလွဲ၍ အခြားမည်သည့်အရာမှ ရွေးချယ်ခွင့်ကို သတ်မှတ်ပါ 'scrollParent'၊ ဥပမာ 'window'၊

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

သေား

tooltip တစ်ခုအတွက် လိုအပ်သော markup သည် dataattribute တစ်ခုသာဖြစ်ပြီး titleသင် tooltip တစ်ခုရှိလိုသော HTML element တွင်ဖြစ်သည်။ ကိရိယာအကြံပြုချက်တစ်ခု၏ ထုတ်လုပ်ထားသော အမှတ်အသားသည် အနေအထားတစ်ခု လိုအပ်သော်လည်း (ပုံမှန်အားဖြင့်၊ topplugin မှ သတ်မှတ်ထားသည်)။

ကီးဘုတ်နှင့် အထောက်အကူနည်းပညာအသုံးပြုသူများအတွက် ကိရိယာအကြံပြုချက်များသည် အလုပ်ဖြစ်ပါစေ။

ရိုးရာကီးဘုတ်-အာရုံစိုက်၍ အပြန်အလှန်အကျိုးပြုသော (လင့်ခ်များ သို့မဟုတ် ဖောင်ထိန်းချုပ်မှုများကဲ့သို့သော) HTML အစိတ်အပိုင်းများသို့သာ ကိရိယာအကြံပြုချက်များကို သင်ထည့်သင့်သည်။ ရည်ညွှန်းချက်ပေါင်းထည့်ခြင်းဖြင့် မထင်မှတ်ထားသော HTML ဒြပ်စင်များ (များကဲ့သို့ <span>) ကို အာရုံစူးစိုက်နိုင်စေ tabindex="0"သော်လည်း၊ ၎င်းသည် ကီးဘုတ်အသုံးပြုသူများအတွက် အပြန်အလှန်တုံ့ပြန်မှုမရှိသော ဒြပ်စင်များပေါ်တွင် စိတ်အနှောက်အယှက်ဖြစ်နိုင်ချေရှိသော တက်ဘ်များကို ပေါင်းထည့်မည်ဖြစ်ပြီး၊ အကူအညီပေးသည့်နည်းပညာအများစုသည် ဤအခြေအနေတွင် ကိရိယာအကြံပြုချက်ကို မကြေငြာပါ။ hoverထို့အပြင်၊ ၎င်းသည် သင်၏ tooltips များကိုကီးဘုတ်အသုံးပြုသူများအတွက် အစပျိုးရန်မဖြစ်နိုင်သောကြောင့် သင်၏ tooltip အတွက် အစပျိုးမှုအဖြစ် သာ အားကိုးမနေပါ နှင့်။

<!-- 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>

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

လုံခြုံရေးအကြောင်းပြချက်များအတွက် ဒေတာရည်ညွှန်းချက်များကို အသုံးပြု၍ sanitize, sanitizeFnနှင့် whiteListရွေးချယ်စရာများကို ပံ့ပိုးမပေးနိုင်ကြောင်း သတိပြုပါ။

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ tooltip သို့ CSS မှိန်သောအကူးအပြောင်းကိုသုံးပါ။
ကွန်တိန်နာ string | ဒြပ်စင် | အတုအယောင် အတုအယောင်

ကိရိယာအကြံဉာဏ်ကို သီးခြားဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်သည်။ ဥပမာ- container: 'body'။ ဤရွေးချယ်မှုသည် အထူးအသုံးဝင်သည် - ၎င်းသည် အစပျိုးသည့်ဒြပ်စင်အနီး စာရွက်စာတမ်း၏စီးဆင်းမှုတွင် tooltip ကို ဝင်းဒိုးအရွယ်အစားပြောင်းလဲနေစဉ်အတွင်း tooltip အား လွှင့်ထုတ်ခြင်းဒြပ်စင်မှ ဝေးကွာသွားခြင်းမှ ကာကွယ်နိုင်သောကြောင့် ၎င်းသည် အထူးအသုံးဝင်သည်။
နှောင့်နှေးခြင်း။ နံပါတ် | အရာဝတ္ထု ၀ယ်တယ်။

ကိရိယာအကြံပြုချက် (ms) ပြသခြင်းနှင့် ဖုံးကွယ်ခြင်း နှောင့်နှေးခြင်း - လက်စွဲခလုတ် အမျိုးအစားနှင့် မသက်ဆိုင်ပါ။

နံပါတ်တစ်ခုကို ပေးဆောင်ပါက၊ ဝှက်ထား/ရှိုးနှစ်ခုစလုံးအတွက် နှောင့်နှေးမှုကို သက်ရောက်သည်။

အရာဝတ္ထုဖွဲ့စည်းပုံမှာ-delay: { "show": 500, "hide": 100 }
html ဘူလီယံ အတုအယောင်

ကိရိယာအကြံပြုချက်တွင် HTML ကို ခွင့်ပြုပါ။

မှန်ပါက၊ tooltip's ရှိ HTML တဂ်များကို tooltip titleတွင် ပြန်ဆိုပါမည်။ မှားယွင်းပါက၊ jQuery ၏ textနည်းလမ်းကို DOM ထဲသို့ အကြောင်းအရာထည့်သွင်းရန် အသုံးပြုမည်ဖြစ်သည်။

XSS တိုက်ခိုက်မှုအတွက် သင်စိုးရိမ်ပါက စာသားကို အသုံးပြုပါ။
နေရာချထားခြင်း။ string | လုပ်ဆောင်ချက် 'ထိပ်'

tooltip - auto | နေရာချနည်း ထိပ်တန်း | အောက်ခြေ | ဘယ်ဘက် | မှန်တယ်
သတ်မှတ်ထား သည့်အချိန်တွင် auto၊ ၎င်းသည် ကိရိယာအကြံပေးချက်ကို ဒိုင်နမစ်ကျကျ ပြန်ပြောင်းပေးလိမ့်မည်။

နေရာချထားမှုကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် tooltip DOM node ဖြင့် ခေါ်ပြီး ၎င်း၏ဒုတိယအဖြစ် အစပျိုးသည့်ဒြပ်စင် DOM node ကို ခေါ်သည်။ အကြောင်းအရာကို thistooltip instance အဖြစ် သတ်မှတ်ထားသည်။
ရွေးချယ်မှု string | အတုအယောင် အတုအယောင် ရွေးချယ်သူအား ပံ့ပိုးပေးမည်ဆိုပါက၊ ကိရိယာအကြံပြုချက် အရာဝတ္ထုများကို သတ်မှတ်ထားသော ပစ်မှတ်များသို့ လွှဲအပ်မည်ဖြစ်သည်။ လက်တွေ့တွင်၊ ၎င်းသည် ဒိုင်းနမစ်ထည့်သွင်းထားသော DOM ဒြပ်စင်များ ( jQuery.onပံ့ပိုးမှု) အတွက် ကိရိယာအကြံပြုချက်များကိုလည်း အသုံးပြုရန် အသုံးပြုသည်။ ဒါကို ကြည့် ပြီး ဗဟုသုတရဖွယ် ဥပမာတစ်ခုကို ကြည့်ပါ ။
ပုံစံခွက် ကြိုးတစ်ချောင်း '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

ကိရိယာအကြံပြုချက်ကို ဖန်တီးသည့်အခါ အသုံးပြုရန် HTML ကို အခြေခံပါ။

tooltips titleများကို အထဲသို့ ထိုးသွင်းပါမည် .tooltip-inner။

.arrowtooltip ၏မြှားဖြစ်လာလိမ့်မည်။

အပြင်ဘက်ဆုံး wrapper element တွင် .tooltipclass နှင့် role="tooltip".
ခေါင်းစဥ် string | ဒြပ်စင် | လုပ်ဆောင်ချက် ''

ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး title။

လုပ်ဆောင်ချက်တစ်ခုအား ပေးမည်ဆိုပါက this၊ tooltip နှင့်တွဲထားသည့်အရာအတွက် ၎င်း၏ရည်ညွှန်းသတ်မှတ်မှုဖြင့် ၎င်းကို ခေါ်ပါမည်။
အစပျိုး ကြိုးတစ်ချောင်း 'အာရုံစူးစိုက်မှု'

ကိရိယာအကြံပြုချက်ကို စတင်လုပ်ဆောင်ပုံ - ကလစ် | ပျံဝဲ | အာရုံ | လက်စွဲ။ သင်သည် အစပျိုးများစွာကို ကျော်ဖြတ်နိုင်သည်၊ သူတို့ကို နေရာလွတ်တစ်ခုနဲ့ ခွဲလိုက်ပါ။

'manual'.tooltip('show')tooltip သည် , .tooltip('hide')and .tooltip('toggle')methods များမှတဆင့် ပရိုဂရမ်မာနဖြင့် အစပျိုးသွားမည်ဖြစ်ကြောင်း ညွှန်ပြသည် ၊ ဤတန်ဖိုးကို အခြားသော trigger နှင့် ပေါင်းစပ်၍မရပါ။

'hover'၎င်းသည် ကီးဘုတ်မှတစ်ဆင့် အစပျိုး၍မရသော ကိရိယာအကြံပြုချက်များကို ဖြစ်ပေါ်စေမည်ဖြစ်ပြီး၊ ကီးဘုတ်အသုံးပြုသူများအတွက် တူညီသောအချက်အလက်များကို ပေးပို့ရန် အခြားနည်းလမ်းများရှိနေမှသာ အသုံးပြုသင့်ပါသည်။
နှိမ်သည်။ နံပါတ် | string | လုပ်ဆောင်ချက် ၀ယ်တယ်။

ကိရိယာအကြံပြုချက်၏ အော့ဖ်ဆက်သည် ၎င်း၏ပစ်မှတ်နှင့် သက်ဆိုင်သည်။

အော့ဖ်ဆက်ကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် အော့ဖ်ဆက်ဒေတာပါရှိသော အရာတစ်ခုဖြင့် ခေါ်သည်။ လုပ်ဆောင်ချက်သည် တူညီသောဖွဲ့စည်းပုံနှင့် အရာဝတ္ထုတစ်ခုကို ပြန်ပေးရပါမည်။ အစပျိုးသည့်ဒြပ်စင် DOM node ကို ဒုတိယအငြင်းအခုံအဖြစ် ကျော်ဖြတ်သည်။

နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ offset docs ကို ကိုးကားပါ ။
နေရာချထားမှု string | ဇွတ် 'လှန်' နောက်ကျောတွင် Popper အသုံးပြုမည့် အနေအထားကို သတ်မှတ်ခွင့်ပြုပါ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ အပြုအမူဆိုင်ရာစာရွက်စာတမ်းများ ကို ကိုးကားပါ။
နယ်နိမိတ် string | ဒြပ်စင် 'scrollParent' ကိရိယာအကြံပြုချက်၏ ကန့်သတ်ကန့်သတ်နယ်နိမိတ်ကို ပြည့်လျှံစေသည်။ 'viewport', 'window', 'scrollParent', သို့မဟုတ် HTMLElement အကိုးအကား (JavaScript သာ) ၏ တန်ဖိုးများကို လက်ခံသည် ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ PreventOverflow docs ကို ကိုးကားပါ ။
သန့်ရှင်းရေးလုပ်ပါ။ ဘူလီယံ မှန်ပါတယ်။ သန့်ရှင်းရေးကို ဖွင့်ပါ သို့မဟုတ် ပိတ်ပါ။ အသက်သွင်းပြီးပါက 'template'ရွေးချယ်စရာများ 'title'ကို သန့်စင်သွားပါမည်။
အဖြူရောင်စာရင်း အရာဝတ္ထု မူလတန်ဖိုး ခွင့်ပြုထားသော အရည်အချင်းများနှင့် တဂ်များပါရှိသော အရာ
သန့်စင်ရန် null | လုပ်ဆောင်ချက် null ဤနေရာတွင် သင်သည် သင်၏ကိုယ်ပိုင် sanitize function ကို ပေးနိုင်သည်။ သန့်ရှင်းရေးလုပ်ဆောင်ရန် သီးခြားစာကြည့်တိုက်ကို အသုံးပြုလိုပါက ၎င်းသည် အသုံးဝင်နိုင်သည်။
popperConfig null | အရာဝတ္ထု null Bootstrap ၏ မူရင်း Popper.js config ကိုပြောင်းလဲရန် Popper.js ၏ဖွဲ့စည်းပုံ ကိုကြည့်ပါ

ကိရိယာတစ်ခုချင်းစီအတွက် ဒေတာရည်ညွှန်းချက်များ

အထက်တွင်ရှင်းပြထားသည့်အတိုင်း ဒေတာ attributes များကိုအသုံးပြုခြင်းအားဖြင့် တစ်ဦးချင်းစီ tooltips အတွက် ရွေးချယ်စရာများကို တနည်းအားဖြင့် သတ်မှတ်နိုင်ပါသည်။

နည်းလမ်းများ

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်တွင် method call ကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။

$().tooltip(options)

ဒြပ်စင်စုစည်းမှုသို့ ကိရိယာအကြံပြုချက် လက်ကိုင်ကို ပူးတွဲပါ။

.tooltip('show')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပေးချက်ကို ထုတ်ပြသည်။ ကိရိယာအကြံပြုချက်ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.tooltipပွဲမစမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" အစပျိုးခြင်းဟု ယူဆပါသည်။ သုညအလျား ခေါင်းစဉ်ပါရှိသော ကိရိယာအကြံပြုချက်များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

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

.tooltip('hide')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဝှက်ထားသည်။ ကိရိယာအကြံဉာဏ်ကို အမှန်တကယ် ဝှက်မထားမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.tooltipပွဲမဖြစ်ပွားမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" အစပျိုးခြင်းဟု ယူဆပါသည်။

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

.tooltip('toggle')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ပြောင်းရန်။ ကိရိယာအကြံပြုချက်ကို အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်းမပြုမီ ခေါ်ဆိုသူထံ ပြန်လည်ပေးပို့ခြင်း (ဥပမာ shown.bs.tooltipသို့မဟုတ် hidden.bs.tooltipဖြစ်ရပ်မဖြစ်ပွားမီ)။ ၎င်းသည် tooltip ၏ "လက်စွဲစာအုပ်" အစပျိုးခြင်းဟု ယူဆပါသည်။

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

.tooltip('dispose')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဖျောက်ဖျက်ပစ်သည်။ ကိုယ်စားလှယ်လွှဲအပ်ခြင်းကို အသုံးပြုသည့် ကိရိယာအကြံပြုချက်များ ( ရွေးချယ်ခွင့် ကို အသုံးပြု၍ ဖန်တီးထားသည့် )selector သည် ဆင်းသက်လာသော အစပျိုးဒြပ်စင်များပေါ်တွင် တစ်ဦးချင်း ဖျက်ဆီး၍မရပါ။

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

.tooltip('enable')

ဒြပ်စင်တစ်ခု၏ tooltip ကိုပြသရန်စွမ်းရည်ကိုပေးသည်။ ကိရိယာအကြံပြုချက်များကို မူရင်းအတိုင်း ဖွင့်ထားသည်။

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

.tooltip('disable')

ဒြပ်စင်တစ်ခု၏ tooltip ကိုပြသရန်စွမ်းရည်ကိုဖယ်ရှားသည်။ ၎င်းကို ပြန်လည်ဖွင့်ထားမှသာ ကိရိယာအကြံပြုချက်ကို ပြသနိုင်မည်ဖြစ်သည်။

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

.tooltip('toggleEnabled')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်အား ပြသရန် သို့မဟုတ် ဝှက်ထားရန် စွမ်းရည်ကို ပြောင်းပေးသည်။

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

.tooltip('update')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်၏ အနေအထားကို အပ်ဒိတ်လုပ်သည်။

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

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.tooltip showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
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...
})