Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
Tooltip အစိတ်အပိုင်းသည် အသုံးပြုသူမှ mouse pointer ကို element တစ်ခုသို့ရွှေ့သောအခါတွင်ပေါ်လာသော pop-up box သေးသေးဖြစ်သည်-
Tooltip တစ်ခုဖန်တီးနည်း
ကိရိယာ အကြံပြုချက်တစ်ခု ဖန်တီးရန်၊ data-toggle="tooltip"
ရည်ညွှန်းချက်ကို ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။
title
tooltip အတွင်းတွင်ပြသသင့်သောစာသားကိုသတ်မှတ်ရန် 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>
Bootstrap Tooltip ကိုးကားချက်ကို အပြီးသတ်ပါ။
ကိရိယာအကြံပေးရွေးချယ်စရာများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Tooltip အကိုးအကားသို့ သွားပါ ။