အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

Tooltips

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

ဤစာမျက်နှာတွင်

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

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

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

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

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

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

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

ဥပမာများ

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

ကိရိယာအကြံပြုချက်များနှင့်အတူ အချို့သော inline လင့်ခ်များကို သရုပ်ပြရန် Placeholder စာသား ။ ဒါက အခု အဖြည့်ခံသက်သက်၊ လူသတ်သမား မဟုတ်ဘူး။ စာသားအစစ်အမှန် များကို အတုယူရန် ဤနေရာတွင် တင်ထားသော အကြောင်းအရာ ။ ထို့အပြင် လက်တွေ့ကမ္ဘာအခြေအနေများတွင် အသုံးပြုသည့်အခါ tooltips များ မည်သို့မည်ပုံရှိမည်ကို သင့်အား ပေးဆောင်ရန်သာဖြစ်သည်။ ထို့ကြောင့် သင့်ကိုယ်ပိုင် ဆိုက် သို့မဟုတ် ပရောဂျက် တွင် ၎င်းတို့ကို သင်အသုံးပြုပြီးသည် နှင့် ယင်းလင့်ခ် များရှိ ကိရိယာဆိုင်ရာ အကြံပြုချက်များ မည်သို့လုပ်ဆောင်နိုင်သည်ကို ယခု သင်တွေ့မြင် ရမည်ဟု မျှော်လင့်ပါသည်။

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

<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 မှတဆင့် tooltip ကိုအစပျိုးပါ

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
လျှံ autoလျက်scroll

ကိရိယာအကြံပြုချက် အနေအထားသည် မိဘကွန်တိန်နာ တစ်ခုရှိ overflow: autoသို့မဟုတ် overflow: scrollကျွန်ုပ်တို့ကဲ့သို့ ဖြစ်နေသည့်အခါ အလိုအလျောက် ပြောင်းလဲရန် ကြိုးပမ်း .table-responsiveသော်လည်း မူလနေရာချထားမှု၏ အနေအထားကို ဆက်လက်ထားရှိဆဲဖြစ်သည်။ ၎င်းကိုဖြေရှင်းရန်၊ boundaryရွေးချယ်စရာ (flip ပြုပြင်မွမ်းမံမှုအတွက် popperConfigရွေးချယ်စရာကို အသုံးပြု၍) မည်သည့် HTMLElement တွင်မဆို မူရင်းတန်ဖိုးကို အစားထိုးရန် 'clippingParents'၊ ဥပမာ document.body၊

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

သေား

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

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

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

<!-- 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) ကို အစပျိုးရန် ၎င်းတို့ကို အာရုံစူးစိုက်ရန်၊ ရွှေ့လျားရန် သို့မဟုတ် ကလစ်နှိပ်၍ မရနိုင်ပါ။ ဖြေရှင်းနည်းတစ်ခုအနေဖြင့်၊ သင်သည် ထုပ်ပိုးမှုတစ်ခုမှ tooltip ကို အစပျိုးလိုလိမ့်မည် <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>

ရွေးချယ်မှုများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-animation=""။ ဒေတာ ရည်ညွှန်းချက်များမှတစ်ဆင့် ရွေးချယ်မှုများကို ဖြတ်သန်းသောအခါတွင် camelCase မှ kebab-case သို့ ရွေးချယ်မှုအမည်၏ case အမျိုးအစားကို ပြောင်းလဲရန် သေချာပါစေ။ ဥပမာအားဖြင့်၊ အသုံးပြုမည့်အစား data-bs-customClass="beautifier"၊ အသုံးပြု data-bs-custom-class="beautifier"ပါ။

လုံခြုံရေးအကြောင်းပြချက်များအတွက် sanitize, sanitizeFn, နှင့် allowListရွေးချယ်စရာများကို ဒေတာ attribute များအသုံးပြု၍ ပံ့ပိုးမပေးနိုင်ကြောင်း သတိပြုပါ။
နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
animation ဘူလီယံ true tooltip သို့ CSS မှိန်သောအကူးအပြောင်းကိုသုံးပါ။
container string | ဒြပ်စင် | အတုအယောင် false

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'hover'၎င်းသည် ကီးဘုတ်မှတစ်ဆင့် အစပျိုး၍မရသော ကိရိယာအကြံပြုချက်များကို ဖြစ်ပေါ်စေမည်ဖြစ်ပြီး၊ ကီးဘုတ်အသုံးပြုသူများအတွက် တူညီသောအချက်အလက်များကို ပေးပို့ရန် အခြားနည်းလမ်းများရှိနေမှသာ အသုံးပြုသင့်ပါသည်။
fallbackPlacements ဇွတ် ['top', 'right', 'bottom', 'left'] array တွင် နေရာများစာရင်းကို ပေးခြင်းဖြင့် (စိတ်ကြိုက်အစီအစဥ်အတိုင်း) ပံ့ပိုးပေးခြင်းဖြင့် ပြန်လည်နေရာချထားမှုများကို သတ်မှတ်ပါ။ နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ အပြုအမူမှတ်တမ်းများ ကို ကိုးကားပါ။
boundary string | ဒြပ်စင် 'clippingParents' ကိရိယာအကြံပြုချက်၏ ကန့်သတ်ကန့်သတ်ဘောင် (Popper ၏ PreventOverflow ပြုပြင်မွမ်းမံမှုတွင်သာ အကျုံးဝင်သည်)။ မူရင်းအားဖြင့် ၎င်းသည် 'clippingParents'HTMLElement အကိုးအကား (JavaScript မှတဆင့်သာ) လက်ခံနိုင်သည်။ နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ detectOverflow docs ကို ကိုးကားပါ ။
customClass string | လုပ်ဆောင်ချက် ''

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

နောက်ထပ်အတန်းအမည်များပါရှိသော စာကြောင်းတစ်ခုတည်းကို ပြန်ပေးသင့်သည့် လုပ်ဆောင်ချက်တစ်ခုကိုလည်း သင်ဖြတ်သန်းနိုင်သည်။
sanitize ဘူလီယံ true သန့်ရှင်းရေးကို ဖွင့်ပါ သို့မဟုတ် ပိတ်ပါ။ အသက်သွင်းပြီးပါက 'template'ရွေးချယ်စရာများ 'title'ကို သန့်စင်သွားပါမည်။ ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းရှိ သန့်စင်ဆေးကဏ္ဍကို ကြည့်ပါ ။
allowList အရာဝတ္ထု မူလတန်ဖိုး ခွင့်ပြုထားသော အရည်အချင်းများနှင့် တဂ်များပါရှိသော အရာ
sanitizeFn null | လုပ်ဆောင်ချက် null ဤနေရာတွင် သင်သည် သင်၏ကိုယ်ပိုင် sanitize function ကို ပေးနိုင်သည်။ သန့်ရှင်းရေးလုပ်ဆောင်ရန် သီးခြားစာကြည့်တိုက်ကို အသုံးပြုလိုပါက ၎င်းသည် အသုံးဝင်နိုင်သည်။
offset ခင်းကျင်း | string | လုပ်ဆောင်ချက် [0, 0]

ကိရိယာအကြံပြုချက်၏ အော့ဖ်ဆက်သည် ၎င်း၏ပစ်မှတ်နှင့် သက်ဆိုင်သည်။ ကော်မာ ခြားထားသော တန်ဖိုးများဖြင့် ဒေတာ attribute များတွင် စာကြောင်းတစ်ခုကို သင်ဖြတ်သန်းနိုင်သည်-data-bs-offset="10,20"

အော့ဖ်ဆက်ကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် popper နေရာချထားမှု၊ ရည်ညွှန်းချက်နှင့် popper rects ပါရှိသော အရာတစ်ခုဖြင့် ခေါ်သည်။ အစပျိုးသည့်ဒြပ်စင် DOM node ကို ဒုတိယအငြင်းအခုံအဖြစ် ကျော်ဖြတ်သည်။ လုပ်ဆောင်ချက်သည် နံပါတ်နှစ်ခုပါသော array တစ်ခုကို ပြန်ပေးရပါမည် ။[skidding, distance]

နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ offset docs ကို ကိုးကားပါ ။
popperConfig null | အရာဝတ္ထု | လုပ်ဆောင်ချက် null

Bootstrap ၏မူလ Popper config ကိုပြောင်းလဲရန် Popper ၏ဖွဲ့စည်းပုံ ကိုကြည့်ပါ ။

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

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

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

Function ဖြင့်အသုံးပြုခြင်း။popperConfig

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

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

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

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

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

ရှိုး

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

tooltip.show()

ပုန်း

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

tooltip.hide()

ပြောင်းရန်

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

tooltip.toggle()

စွန့်ပစ်ပါ။

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

tooltip.dispose()

ဖွင့်ပါ။

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

tooltip.enable()

ပိတ်ပါ။

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

tooltip.disable()

ခလုတ်ဖွင့်ထားသည်။

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

tooltip.toggleEnabled()

အပ်ဒိတ်

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

tooltip.update()

getInstance

DOM ဒြပ်စင်နှင့်ဆက်စပ်နေသော tooltip instance ကိုရနိုင်စေသည့် Static method

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

getOrCreateInstance

DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော tooltip instance ကို ရယူရန် ခွင့်ပြုသည့် Static method သည် သို့မဟုတ် ၎င်းကို စတင်မလုပ်ဆောင်ပါက အသစ်တစ်ခုကို ဖန်တီးပါ။

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

အဲ့ဒါနဲ့

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