W3.CSS Tooltips
အောက်ဖော်ပြပါ စာကြောင်းများပေါ်တွင် ရွှေ့ပါ
လန်ဒန် သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။(9 million inhabitants)
လန်ဒန် 9 million inhabitants သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။
W3.CSS Tooltip အတန်းများ
W3.CSS သည် အောက်ပါ tooltip အတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3- tooltip | tooltip ဒြပ်စင် |
| w3-စာသား | tooltip စာသား |
Tooltip Element နှင့် Tooltip Text
HTML ဒြပ်စင်တစ်ခုပေါ်တွင် သင် ပျံဝဲသည့်အခါ ကိရိယာအကြံပြုချက်များသည် စာသား (သို့မဟုတ် အခြားအကြောင်းအရာ) ကို ပြသသည်။
w3-tooltip အတန်း သည် အပေါ်မှ ရွှေ့ရန် အစိတ်အပိုင်းကို သတ်မှတ်သည် ( tooltip container )။
w3-text အတန်း သည် tooltip စာသားကို သတ်မှတ်သည်။
အောက်ဖော်ပြပါဝါကျပေါ်တွင် ရွှေ့ပါ-
လန်ဒန် သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။(9 million inhabitants)
ဥပမာ
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Tag အဖြစ် Tooltip
အောက်ဖော်ပြပါဝါကျပေါ်တွင် ရွှေ့ပါ-
လန်ဒန် 9 million inhabitants သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။
ဥပမာ
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
ရုပ်ပုံ ကိရိယာ အကြံပြုချက်
အကျိုးသက်ရောက်မှုကို ကြည့်ရန် ဤပုံပေါ်တွင် နှိပ်ပါ။
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
ဥပမာ (ပုံရှေ့မှာ စာသားပါ)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
ဥပမာ (ပုံပြီးနောက်စာသား)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Absolute Positioned Tooltip
ကိရိယာအကြံပြုချက်အား ပကတိအနေအထားတွင် ပေါ်လာစေလိုပါက၊ tooltip စာသားကို CSS ဖြင့် နေရာချပါ-
ဥပမာ
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
ရောင်စုံ Tooltip
ရောင်စုံတူးလ်အကြံဉာဏ်ကို ရယူလိုပါက w3- အရောင် အတန်းများကို အသုံးပြုပါ ။
ဥပမာ
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
လုံးဝန်းသော Tooltip
လုံးဝန်း သော tooltip ကို လိုချင်ပါက w3- round classes ကို အသုံးပြုပါ။
ဥပမာ
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
သေးငယ်သော Tooltip
သေးငယ်သော tooltip ကိုလိုချင်ပါက w3-small class ကိုသုံးပါ။
ဥပမာ
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
သေးငယ်သော Tooltip
သေးငယ်သော tooltip ကိုလိုချင်ပါက w3-tiny class ကိုသုံးပါ။
ဥပမာ
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
ကြီးမားသော Tooltip
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>