CSS توجیہات
- پچھلے ویب پیج CSS انیمیشن
- پائیدار ویب پیج CSS تصویر کا شکل
CSS کے ذریعے tooltip بنایا جاتا ہے (Tooltip).
مقابلو
مثال
جب کاربر موس کا نقش ایک عنصر پر کرتا ہے تو، ابجائز کا استعمال، علاقے کی معلومات فراہم کرنے کیلئے کیا جاتا ہے:
بنیادی tooltip
ایک موس کا ایلچی بنا دیا گیا ہے جو ایک عنصر پر موس کا نقش کیا جائے تو دکھائی دیا جائے گا:
مثال
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
توضیح مثال
HTML:
کا استعمال کیا جاتا ہے، مثلاً <div>، اور اس میں "tooltip" کلاس کا استعمال کیا جاتا ہے۔ جب یوزر موس کو اس <div> پر موس کا آئیکن بھیجتا ہے تو، آئیکن کا پتھر کا متن دکھایا جائے۔
آئیکن کا پتھر کا متن class="tooltiptext" کا داخل علامت (مثلاً <span>) میں۔
CSS:
tooltip کلاس استعمال کی جاتی ہے position:relative، آئیکن کا پتھر کا متن کی مقام نکالنا (position:absolute）。 یاد رکھیں کہ آپ کا استعمال کیجئے، نیچل کی مثال دیکھیں۔
tooltiptext کلاس آپسی طور پر آئیکن کا پتھر کا متن رکھتی ہے۔ مالامال طور پر اس کا پتھر پوشیدار ہوتا ہے اور موس کا آئیکن پر دکھایا جاتا ہے (بنیادی طور پر دیکھیں)۔ ہم نے اس کی کچھ بنیادی استایلز بھی شامل کی ہیں: 120 پیکسلو کی وسیع، کالے پس منظر، سفید متن، وسط میں متن اور 5 پیکسلو کا سمت میں مارگن (padding)
CSS border-radius کی ویلو کا استعمال کیا جاتا ہے تاکہ آئیکن کا پتھر کا متن کی کونے کو دکھایا جائے。
جب یوزر موس کو class="tooltip" کا div پر موس کا آئیکن بھیجتا ہے،:hover شوٹسر کا استعمال کیا جاتا ہے تاکہ آئیکن کا پتھر کا متن دکھایا جائے。
آئیکن کا پتھر کی مقام نکالنا
اس مثال میں، آئیکن کا پتھر 'موس کا آئیکن' (div) کی دائیں جانب رہا ہے (left:105%）。 مزید رکھیں کہ،top:-5px کا استعمال کیا جاتا ہے تاکہ وہ اپنے کنٹینر علامت کی وسط میں رہ سکے۔ ہم نے نمبر 5 استعمال کیا کیونکہ آئیکن کا پتھر کی سمت میں 5 پیکسلو کا پیدائشی مارگن (margin) ہے۔ اگر آپ کا خواہش ہو کہ اس کا مارگن بڑھ جائے، تو اس کا بھی مارگن بڑھائیں top کی ویلو، تاکہ وہ وسط میں رہے۔ اگر آپ کا خواہش ہو کہ آئیکن کا پتھر بائیں جانب رہے، تو اس کا بھی استعمال ہوتا ہے。
دائیں جانب کا آئیکن کا پتھر
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
نتیجہ:
بائیں جانب کا آئیکن کا پتھر
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
نتیجہ:
اگر آپ کا خواہش ہو کہ آئیکن کا پتھر اوپر یا نیچل میں رہے، تو نیچل کی مثال دیکھیں۔ لطفاً یاد رکھیں کہ ہم نے منفی 60 پیکسلو کا بائیں بیرونی مارگن (margin-left) استعمال کیا ہے، تاکہ آئیکن کا پتھر سائز کا نصف (120/2 = 60) وسط میں وسط کیا جائے。
بنیادی آئیکن کا پتھر
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* استعمال نصف قطر (120/2 = 60)، تاکہ آئیکن کا پتھر وسط میں وسط کیا جائے */
}
نتیجہ:
بنیادی آئیکن کا پتھر
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* استعمال نصف قطر (120/2 = 60)، تاکہ آئیکن کا پتھر وسط میں وسط کیا جائے */
}
نتیجہ:
آئیکن کا پتھر
کسی کا خواہش ہو کہ آئیکن کا پتھر اس کی مخصوص جانب پر دکھائی دیکھائی جائے، تو آئیکن کے بعد 'خالی' کا مواد شامل کریں اور پوسٹ-ایلیمنٹ کلاس استعمال کریں ::after و content این ویژگیها. مخفیلی خود به وسیله لبهها ایجاد میشود. این باعث میشود که ابزارنمای مانند حباب به نظر برسد.
این مثال نشان میدهد که چگونه میتوان مخفیلی را در پایین ابزارنمای اضافه کرد:
مخفیلی پایین
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5پایک;
border-width: 5پایک;
border-style: solid;
border-color: سیاه شفاف شفاف شفاف;
}
نتیجہ:
توضیح مثال
مخفیلی را در داخل ابزارنمای قرار دهید:top: 100% مخفیلی را در پایین ابزارنمای قرار دهید.left: 50% این کار باعث میشود که مخفیلی در وسط قرار گیرد.
توجه:border-width این属性 اندازه مخفیلی را مشخص میکند. اگر این تنظیم را تغییر دهید، لطفاً margin-left مقدار به مقدار مشابه تغییر دهید. این کار باعث میشود که مخفیلی در وسط قرار گیرد.
border-color برای تبدیل محتوا به مخفیلی استفاده میشود. ما لبه بالا را سیاه تنظیم کردهایم و بقیه را شفاف کردهایم. اگر تمام لبهها سیاه باشند، در نهایت یک مربع سیاه خواهید داشت.
این مثال نشان میدهد که چگونه میتوان مخفیلی را در بالا ابزارنمای اضافه کرد. توجه داشته باشید که این بار ما رنگ لبه پایین را تنظیم کردهایم:
مخفیلی بالا
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5پایک;
border-width: 5پایک;
border-style: solid;
border-color: شفاف شفاف سیاه شفاف;
}
نتیجہ:
این مثال نشان میدهد که چگونه میتوان مخفیلی را در سمت چپ ابزارنمای اضافه کرد:
مخفیلی سمت چپ
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5پایک;
border-width: 5پایک;
border-style: solid;
border-color: شفاف سیاه شفاف شفاف;
}
نتیجہ:
این مثال نشان میدهد که چگونه میتوان مخفیلی را در سمت راست ابزارنمای اضافه کرد:
مخفیلی سمت راست
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5پایک;
border-width: 5پایک;
border-style: solid;
border-color: شفاف شفاف شفاف سیاه;
}
نتیجہ:
درخشائی سے درآمد کی جانب توجیہات (انیمیشن)
اگر آپ چاہتے ہیں کہ ابھرنے والی توجیہات میں توجیہات میں درخشائی سے نکل جائیں تو، CSS transition ویژگی سے opacity ویژگی کو استعمال کیا جاتا ہے، اور مقررہ سیکنڈ (مثال میں 1 سیکنڈ) کے اندر سارے غیر مرئی سے 100% مرئی میں تبدیل ہوتا ہے:
مثال
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- پچھلے ویب پیج CSS انیمیشن
- پائیدار ویب پیج CSS تصویر کا شکل
