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()
})

ဥပမာများ

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

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

<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 ကို ခေါ်သည်။ အကြောင်းအရာကို `this`tooltip 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`။ `.arrow`tooltip ၏မြှားဖြစ်လာလိမ့်မည်။ အပြင်ဘက်ဆုံး wrapper element တွင် `.tooltip`class နှင့် `role="tooltip"`.
ခေါင်းစဥ်	string \| ဒြပ်စင် \| လုပ်ဆောင်ချက်	''	ရည်ညွှန်းချက် မရှိပါက မူရင်းခေါင်းစဉ်တန်ဖိုး `title`။ လုပ်ဆောင်ချက်တစ်ခုကို ပေးမည်ဆိုပါက `this`၊ tooltip နှင့် ပူးတွဲပါရှိသော ဒြပ်စင်အတွက် ၎င်း၏ရည်ညွှန်းသတ်မှတ်မှုဖြင့် ၎င်းကို ခေါ်ပါမည်။
အစပျိုး	ကြိုးတစ်ချောင်း	'အာရုံစူးစိုက်မှု'	ကိရိယာအကြံပြုချက်ကို စတင်လုပ်ဆောင်ပုံ - ကလစ် \| ပျံဝဲ \| အာရုံ \| လက်စွဲ။ သင်သည် အစပျိုးများစွာကို ကျော်ဖြတ်နိုင်သည်၊ သူတို့ကို နေရာလွတ်တစ်ခုနဲ့ ခွဲလိုက်ပါ။ `'manual'.tooltip('show')`tooltip သည် , `.tooltip('hide')`and `.tooltip('toggle')`methods များမှတဆင့် ပရိုဂရမ်မာနဖြင့် အစပျိုးသွားမည်ဖြစ်ကြောင်း ညွှန်ပြသည် ၊ ဤတန်ဖိုးကို အခြားအစပျိုးကိရိယာနှင့် ပေါင်းစပ်၍မရပါ။ `'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 ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ 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')`

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

$('#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...
})

Tooltips

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

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

ဥပမာများ

အသုံးပြုမှု

လျှံ autoလျက်scroll

သေား

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

မသန်စွမ်းတာတော့ မဟုတ်ပါဘူး။

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

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

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

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

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

.tooltip('dispose')

.tooltip('enable')

.tooltip('disable')

.tooltip('toggleEnabled')

.tooltip('update')