Bootstrap 4 Popover
Bootstrap 4 Popover
Popover အစိတ်အပိုင်းသည် tooltips များနှင့်ဆင်တူသည်။ အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါတွင် ၎င်းသည် ပေါ်လာသော ပေါ်လာသောဘောက်စ်တစ်ခုဖြစ်သည်။ ကွာခြားချက်မှာ Popover တွင် အကြောင်းအရာများစွာ ပါဝင်နိုင်ခြင်းကြောင့် ဖြစ်သည်။
Popover ကို ပြောင်းပါ။Popover ဖန်တီးနည်း
popover တစ်ခုဖန်တီးရန်၊ data-toggle="popover"
ရည်ညွှန်းချက်ကို ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။
title
popover ၏ခေါင်းစီးစာသားကိုသတ်မှတ်ရန် attribute ကိုသုံးပါ၊ နှင့် popover data-content
၏ကိုယ်ထည်အတွင်းတွင်ပြသသင့်သောစာသားကိုသတ်မှတ်ရန် attribute ကိုအသုံးပြုပါ။
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
မှတ်ချက်- Popovers များကို jQuery ဖြင့် အစပြုရပါမည် popover()
။
အောက်ပါကုဒ်သည် စာရွက်စာတမ်းရှိ popover အားလုံးကို ဖွင့်ပေးလိမ့်မည်-
ဥပမာ
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popovers နေရာချထားခြင်း။
ပုံမှန်အားဖြင့်၊ ပေါ့ပ်ဗာသည် ဒြပ်စင်၏ညာဘက်ခြမ်းတွင် ပေါ်လာလိမ့်မည်။
data-placement
ဒြပ်စင်၏အပေါ်၊ အောက်ခြေ၊ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ခြမ်းရှိ popover ၏ အနေအထားကို သတ်မှတ်ရန် ရည်ညွှန်းချက်ကို အသုံးပြု ပါ။
ဥပမာ
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
မှတ်ချက်- နေရာချထားမှု အရည်အချင်းများသည် ၎င်းတို့အတွက် နေရာမလုံလောက်ပါက သင်မျှော်လင့်ထားသည့်အတိုင်း အလုပ်မဖြစ်ပါ။ ဥပမာ- စာမျက်နှာတစ်ခု၏ထိပ်တွင် နေရာချထားမှုကို သင်အသုံးပြုပါက (၎င်းအတွက်နေရာမရှိသော)၊ ၎င်းသည် အစိတ်အပိုင်းအောက်ရှိ popover သို့မဟုတ် ညာဘက်တွင် (၎င်းအတွက်နေရာတိုင်းတွင် နေရာလွတ်) ကိုပြသမည်ဖြစ်သည်။
Popovers ပိတ်ခြင်း။
မူလအားဖြင့်၊ သင်ဒြပ်စင်ကို ထပ်မံနှိပ်လိုက်သောအခါတွင် ပေါ့ပ်ဗာသည် ပိတ်သွားမည်ဖြစ်သည်။ data-trigger="focus"
သို့သော်၊ ဒြပ်စင်အပြင်ဘက်တွင် နှိပ်သည့်အခါ popover ကိုပိတ်မည့် attribute ကို သင်အသုံးပြုနိုင်သည် -
ဥပမာ
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
အကြံပြုချက်- မောက်စ်ညွှန်ပြချက်ကို ဒြပ်စင်ပေါ်မှ ရွှေ့သည့်အခါ popover ကို ပြသလိုပါက၊ data-trigger
"hover" တန်ဖိုးဖြင့် အရည်အချင်းကို အသုံးပြုပါ-
ဥပမာ
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Bootstrap Popover ကိုးကားချက်ကို အပြီးသတ်ပါ။
Popover ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Popover Reference သို့ သွားပါ ။