تلميح CSS
قم بإنشاء تلميحات باستخدام CSS.
العرض التوضيحي: أمثلة على تلميح الأدوات
غالبًا ما يتم استخدام تلميح أداة لتحديد معلومات إضافية حول شيء ما عندما يحرك المستخدم مؤشر الماوس فوق عنصر:
تلميح أساسي
أنشئ تلميح أداة يظهر عندما يحرك المستخدم الماوس فوق عنصر:
مثال
<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> ، فإنه سيعرض نص تلميح الأداة.
يتم وضع نص التلميح داخل عنصر مضمن (مثل <span>) مع class="tooltiptext".
CSS: استخدام tooltipالفئة position:relative، وهو أمر ضروري لوضع نص تلميح الأداة ( position:absolute).
ملاحظة: انظر الأمثلة أدناه حول كيفية وضع التلميح.
يحتوي tooltiptextالفصل على نص تلميح الأداة الفعلي. إنه مخفي افتراضيًا ، وسيكون مرئيًا عند التمرير (انظر أدناه). لقد أضفنا أيضًا بعض الأنماط الأساسية إليها: عرض 120 بكسل ، ولون خلفية سوداء ، ولون نص أبيض ، ونص مركزي ، وحشو علوي وسفلي 5 بكسل.
تُستخدم خاصية CSS border-radiusلإضافة زوايا مستديرة إلى نص تلميح الأداة.
يتم :hoverاستخدام المحدد لإظهار نص تلميح الأداة عندما يحرك المستخدم الماوس فوق <div> باستخدام class="tooltip".
تحديد المواقع تلميحات
في هذا المثال ، يتم وضع التلميح على يمين ( left:105%) النص "القابل للتمرير" (<div>). لاحظ أيضًا أنه top:-5pxيتم استخدامه لوضعه في منتصف عنصر الحاوية الخاص به. نستخدم الرقم 5 لأن نص تلميح الأداة به مساحة متروكة أعلى وأسفل 5 بكسل. إذا قمت بزيادة المساحة المتروكة الخاصة بها ، فقم أيضًا بزيادة قيمة topالخاصية للتأكد من بقائها في المنتصف (إذا كان هذا هو الشيء الذي تريده). الأمر نفسه ينطبق إذا كنت تريد وضع التلميح على اليسار.
تلميح أداة الحق
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
نتيجة:
تلميح أداة اليسار
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
نتيجة:
إذا كنت تريد ظهور تلميح الأداة في الأعلى أو في الأسفل ، فراجع الأمثلة أدناه. لاحظ أننا نستخدم margin-leftالخاصية بقيمة أقل من 60 بكسل. هذا لتوسيط التلميح أعلى / أسفل النص القابل للتحويم. يتم ضبطه على نصف عرض تلميح الأداة (120/2 = 60).
أعلى تلميح
.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 */
}
نتيجة:
سهام تلميح
لإنشاء سهم يجب أن يظهر من جانب معين من تلميح الأداة ، أضف محتوى "فارغًا" بعد تلميح الأداة ، مع فئة العنصر الزائف ::afterمع content
الخاصية. تم إنشاء السهم نفسه باستخدام الحدود. سيؤدي هذا إلى جعل التلميح يبدو وكأنه فقاعة كلام.
يوضح هذا المثال كيفية إضافة سهم إلى أسفل تلميح الأداة:
السهم السفلي
.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;
}
نتيجة:
شرح المثال
ضع السهم داخل تلميح الأداة: 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: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
نتيجة:
يوضح هذا المثال كيفية إضافة سهم إلى يسار تلميح الأداة:
السهم الايسر
.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 .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;
}
نتيجة:
تلميحات أدوات التلاشي (الرسوم المتحركة)
إذا كنت تريد أن تتلاشى في نص تلميح الأداة عندما يكون على وشك الظهور ، فيمكنك استخدام خاصية CSS transitionمع opacity
الخاصية ، والانتقال من كونك غير مرئي تمامًا إلى 100٪ مرئي ، في عدد من الثواني المحددة (ثانية واحدة في موقعنا مثال):
مثال
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}