CSS Tooltip
CSS ဖြင့် tooltips ဖန်တီးပါ။
သရုပ်ပြ- Tooltip ဥပမာများ
အသုံးပြုသူသည် မောက်စ်ညွှန်ပြချက်ကို ဒြပ်စင်တစ်ခုပေါ်မှ ရွှေ့သည့်အခါ တစ်စုံတစ်ခုနှင့်ပတ်သက်သည့် အပိုအချက်အလက်များကို သတ်မှတ်ရန် ကိရိယာအကြံပြုချက်ကို မကြာခဏအသုံးပြုသည်-
အခြေခံ Tooltip
အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုပေါ်မှ mouse ကို ရွှေ့သည့်အခါ ပေါ်လာသည့် ကိရိယာအကြံပြုချက်ကို ဖန်တီးပါ-
ဥပမာ
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
နမူနာရှင်းပြထားပါတယ်။
HTML- ကွန်တိန်နာဒြပ်စင် ( <div> ကဲ့သို့) ကိုသုံး၍ ၎င်းတွင်
"tooltip"အတန်းကို ထည့်ပါ။ အသုံးပြုသူသည် ဤ <div> ကို မောက်စ်တင်သောအခါ၊ ၎င်းသည် tooltip စာသားကို ပြသလိမ့်မည်။
tooltip စာသားကို inline element ( <span> ကဲ့သို့) ဖြင့် ထည့်သွင်းထားသည် class="tooltiptext"။
CSS- tooltip text ( )
ကို နေရာချထားရန် လိုအပ်သော tooltipclass ကို အသုံးပြု သည်။ မှတ်ချက်- tooltip ကို ဘယ်လိုနေရာချရမလဲဆိုတာ အောက်က ဥပမာတွေကို ကြည့်ပါ။position:relativeposition:absolute
tooltiptextအတန်းသည် အမှန်တကယ် tooltip စာသားကို ကိုင်ဆောင်ထားသည် ။ ၎င်းကို ပုံသေအားဖြင့် ဝှက်ထားပြီး၊ အပေါ်မှမြင်နိုင်သည် (အောက်တွင်ကြည့်ပါ)။ ၎င်းတွင် အခြေခံစတိုင်အချို့ကို 120px အကျယ်၊ အနက်ရောင်နောက်ခံအရောင်၊ အဖြူရောင်စာသားအရောင်၊ အလယ်ဗဟိုစာသားနှင့် 5px အပေါ်နှင့်အောက်ခြေအကွက်များကိုပါ ထည့်သွင်းထားပါသည်။
border-radiusTooltip စာသားတွင် ထောင့်ဝိုင်းများထည့်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
:hoverအသုံးပြုသူက <div> ပေါ်တွင် mouse ကို ရွှေ့သောအခါ tooltip စာသားကို ပြသရန် ရွေးချယ်သည့်ကိရိယာကို အသုံးပြု သည် class="tooltip"။
နေရာချထားခြင်း ကိရိယာ အကြံပြုချက်များ
ဤဥပမာတွင်၊ tooltip ကို left:105%"hoverable" စာသား (<div>) ၏ ညာဘက် ( ) တွင် နေရာချထားသည်။ top:-5px၎င်း၏ကွန်တိန်နာဒြပ်စင်၏အလယ်တွင်၎င်းကိုထားရှိရန်အသုံးပြုသည် ကိုလည်းသတိပြုပါ ။ tooltip စာသားတွင် 5px ၏ အပေါ်နှင့် အောက် အကွက်ပါသောကြောင့် နံပါတ် 5 ကို အသုံးပြုပါသည်။ top၎င်း၏ padding ကို တိုးမြှင့်ပါက၊ ၎င်းသည် အလယ်တွင် ရှိနေကြောင်း သေချာစေရန် (၎င်းသည် သင်အလိုရှိသောအရာဖြစ်ပါက) ပိုင်ဆိုင်မှု တန်ဖိုးကိုလည်း တိုးမြှင့် ပါ။ ကိရိယာအကြံပြုချက်ကို ဘယ်ဘက်တွင် ထားရှိလိုပါက အလားတူပင်ဖြစ်သည်။
မှန်ကန်သော Tooltip
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
ရလဒ်:
ဘယ်ဘက် Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
ရလဒ်:
ကိရိယာအကြံပြုချက်ကို အပေါ် သို့မဟုတ် အောက်ခြေတွင် ပေါ်စေချင်ပါက၊ အောက်ပါ ဥပမာများကို ကြည့်ပါ။ margin-leftကျွန်ုပ်တို့သည် အနှုတ် 60 ပစ်ဇယ်တန်ဖိုးဖြင့် ပိုင်ဆိုင်မှု ကို အသုံးပြုကြောင်း သတိပြုပါ ။ ၎င်းသည် ရွေ့လျားနိုင်သော စာသားအပေါ်/အောက်ရှိ ကိရိယာအကြံပြုချက်ကို ဗဟိုပြုရန်ဖြစ်သည်။ ၎င်းကို tooltip ၏ အကျယ်၏ ထက်ဝက် (120/2 = 60) ဟု သတ်မှတ်ထားသည်။
ထိပ်တန်း Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
ရလဒ်:
အောက်ခြေတူးလ်အကြံပြုချက်
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
ရလဒ်:
Tooltip Arrows
ကိရိယာအကြံပြုချက်၏ တစ်ဖက်ခြမ်းမှ ပေါ်လာမည့် မြှားတစ်ခုကို ဖန်တီးရန်၊ ပိုင်ဆိုင်မှု နှင့် pseudo-ဒြပ်စင် အတန်းအစား နှင့်အတူ ကိရိယာအကြံပြုချက်ပြီးနောက် "ဗလာ" အကြောင်းအရာကို ထည့်ပါ ::after။ contentမြှားကိုယ်တိုင်က နယ်နိမိတ်များကို အသုံးပြု၍ ဖန်တီးထားသည်။ ၎င်းသည် tooltip အား စကားပြောပူဖောင်းတစ်ခုအဖြစ် မြင်နိုင်မည်ဖြစ်သည်။
ဤဥပမာသည် tooltip ၏အောက်ခြေတွင် မြှားတစ်ချောင်းထည့်နည်းကို သရုပ်ပြသည်-
အောက်ခြေမြှား
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
ရလဒ်:
နမူနာရှင်းပြထားပါတယ်။
မြှားကို tooltip အတွင်းတွင် နေရာချထားပါ- မြှားကို top: 100%tooltip ၏အောက်ခြေတွင် နေရာချပါမည်။ left: 50%မြှားကို ဗဟိုပြုလိမ့်မည်။
မှတ်ချက်- ပိုင်ဆိုင်မှု border-widthသည် မြှား၏အရွယ်အစားကို သတ်မှတ်သည်။ ၎င်းကိုပြောင်းပါက margin-leftတန်ဖိုးကိုလည်း အလားတူပြောင်းပါ။ ၎င်းသည် မြှားကို ဗဟိုပြုနေမည်ဖြစ်သည်။
border-colorအကြောင်းအရာကို မြှားတစ်စင်းအဖြစ် ပြောင်းလဲရန် ၎င်းကို အသုံးပြုသည် ။ ထိပ်ဘောင်ကို အနက်ရောင်အဖြစ် သတ်မှတ်ပြီး ကျန်အပိုင်းကို ဖောက်ထွင်းမြင်ရသည်။ နှစ်ဖက်စလုံးက အနက်ရောင်ဆိုရင် အနက်ရောင်စတုရန်းပုံးတစ်ခုနဲ့ အဆုံးသတ်သွားလိမ့်မယ်။
ဤဥပမာသည် tooltip ၏ထိပ်တွင် မြှားတစ်ခုထည့်နည်းကို သရုပ်ပြသည်။ ဤတစ်ကြိမ်တွင် အောက်ခြေဘောင်အရောင်ကို သတ်မှတ်ကြောင်း သတိပြုပါ။
ထိပ်မြှား
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
ရလဒ်:
ဤဥပမာသည် tooltip ၏ဘယ်ဘက်တွင်မြှားကိုထည့်နည်းကိုသရုပ်ပြသည်-
ဘယ်မြှား
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
ရလဒ်:
ဤဥပမာသည် tooltip ၏ညာဘက်တွင် မြှားကိုထည့်နည်းကို သရုပ်ပြသည်-
ညာမြှား
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
ရလဒ်:
Fade In Tooltips (အန်နီမေးရှင်း)
သင်မြင်နိုင်တော့မည့်အချိန်တွင် tooltip စာသားတွင် မှိန်သွားလိုပါက၊ သင်သည် CSS transitionပိုင်ဆိုင်မှုကို ပိုင်ဆိုင်မှုနှင့်အတူ တွဲ သုံးနိုင်ပြီး opacity
၊ လုံးဝမမြင်နိုင်သော 100% မြင်နိုင်စေရန်၊ သတ်မှတ်ထားသောစက္ကန့်များစွာအတွင်း (ကျွန်ုပ်တို့၏ 1 စက္ကန့်တွင်၊ ဥပမာ):
ဥပမာ
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}