Bootstrap Tooltip Plugin
Tooltip Plugin
Tooltip plugin သည် အသုံးပြုသူမှ mouse pointer ကို element တစ်ခုပေါ်မှ ရွှေ့သည့်အခါ ပေါ်လာသော pop-up box သေးသေးဖြစ်သည်-
အကြံပြုချက်- ပလပ်အင်များကို တစ်ဦးချင်းစီ (Bootstrap ၏ "tooltip.js" ဖိုင်ကို အသုံးပြု၍) သို့မဟုတ် အားလုံးကို တစ်ပြိုင်နက် ("bootstrap.js" သို့မဟုတ် "bootstrap.min.js" သုံးပြီး) တစ်ခုချင်းစီ ထည့်သွင်းနိုင်သည်။
Tooltip တစ်ခုဖန်တီးနည်း
ကိရိယာ အကြံပြုချက်တစ်ခု ဖန်တီးရန်၊ data-toggle="tooltip"
ရည်ညွှန်းချက်ကို ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။
titletooltip အတွင်းတွင်ပြသသင့်သောစာသားကိုသတ်မှတ်ရန် attribute ကို သုံး ပါ-
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
မှတ်ချက်- တူးလ်အကြံဉာဏ်များကို jQuery ဖြင့် အစပြုရပါမည် tooltip()။
အောက်ပါကုဒ်သည် စာရွက်စာတမ်းရှိ ကိရိယာအကြံပြုချက်အားလုံးကို ဖွင့်ပေးလိမ့်မည်-
ဥပမာ
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
နေရာချထားခြင်း ကိရိယာ အကြံပြုချက်များ
မူရင်းအားဖြင့်၊ ကိရိယာအကြံပြုချက်သည် ဒြပ်စင်၏ထိပ်တွင် ပေါ်လာလိမ့်မည်။
data-placementဒြပ်စင်၏အပေါ်၊ အောက်ခြေ၊ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ခြမ်းရှိ tooltip ၏ တည်နေရာကို သတ်မှတ်ရန် attribute ကိုသုံး ပါ-
ဥပမာ
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
အကြံပြုချက်- " " ရည်ညွှန်းချက်ကို သင်သည် ဘရောင်ဇာမှ ကိရိယာအကြံပြုချက်၏ တည်နေရာကို ဆုံးဖြတ်နိုင်စေမည့် data-placementတန်ဖိုးတစ်ခု ဖြင့်လည်း သင်အသုံးပြုနိုင်ပါသည် ။ autoဥပမာအားဖြင့်၊ တန်ဖိုးသည် " auto left"ဖြစ်ပါက၊ သို့မဟုတ်ပါက ညာဘက်တွင် ဖြစ်နိုင်သည့်အခါ tooltip သည် ဘယ်ဘက်ခြမ်းတွင် ပြသမည်ဖြစ်သည်။
Bootstrap Tooltip ကိုးကားချက်ကို အပြီးသတ်ပါ။
ကိရိယာအကြံပေးရွေးချယ်စရာများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Tooltip အကိုးအကားသို့ သွားပါ ။