إنشاء تلميحات مع 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 الطبقة يحمل النص تلميح الأداة الفعلية. مخفيا بشكل افتراضي، وسوف تكون مرئية على التحويم (أنظر أدناه). واضاف لدينا أيضا بعض الأساليب الأساسية لذلك: عرض 120px، لون الخلفية أسود، لون النص الأبيض، نص محورها، و5px أعلى والحشو السفلي.
وCSS3 border-radius يستخدم خاصية لإضافة تدوير الزوايا في النص تلميح الأدوات.
و :hover يستخدم محدد لعرض النص تلميح الأدوات عندما يقوم المستخدم بتحريك الماوس فوق <div> مع class="tooltip" .
المواقع تلميحات
في هذا المثال، يتم وضع تلميح الأدوات إلى اليمين (left:105%) من "hoverable" النص (<div>) . نلاحظ أيضا أن top:-5px يستخدم لوضعه في منتصف العنصر الحاوية الخاصة به. نستخدم رقم 5 لأن النص تلميح الأدوات لديه الحشو العلوي والسفلي من 5px. إذا قمت بزيادة الحشو لها، أيضا زيادة قيمة top العقار لضمان أن يبقى في الوسط (إذا كان هذا هو ما تريد). وينطبق الشيء نفسه إذا كنت تريد تلميح الأدوات وضعها على يسار.
تلميح الأدوات الصحيح
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
نتيجة:
اليسار تلميح الأدوات
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
نتيجة:
إذا كنت ترغب في تلميح الأدوات لتظهر في أعلى أو على الجزء السفلي، انظر الأمثلة أدناه. لاحظ أن نستخدم margin-left ممتلكات بقيمة ناقص 60 بكسل. هذا هو لتوسيط تلميح الأدوات أعلى / أسفل النص hoverable. ومن المقرر أن النصف من عرض تلميح الأدوات ل(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;
}
نتيجة:
تتلاشى في تلميحات (الرسوم المتحركة)
إذا كنت تريد أن تتلاشى في النص تلميح الأدوات عندما يكون على وشك أن تكون واضحة، يمكنك استخدام CSS3 transition الملكية إلى جانب opacity الملكية، والانتقال من كونها غير مرئية تماما إلى 100٪ وضوحا، في عدد من ثواني معينة (1 ثانية في مثالنا):
مثال
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} انها محاولة لنفسك » ملاحظة: سوف تتعلم المزيد عن التحولات والرسوم المتحركة في وقت لاحق في البرنامج التعليمي لدينا.