أدوات التلميحات الخاصة بـ CSS
- الصفحة السابقة رسوم متحركة CSS
- الصفحة التالية تصميم الصور الخاصة بـ CSS
Créez une infobulle (Tooltip) avec CSS.
Exemple : Infobulle
مثال
Lorsque l'utilisateur passe le curseur de la souris sur un élément, l'infobulle est généralement utilisée pour fournir des informations supplémentaires sur un contenu :
Infobulle de base
Créez une infobulle qui apparaît lorsque vous passez la souris sur un élément :
مثال
<style>
/* Conteneur de l'infobulle */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Affichez une ligne pointillée en dessous du texte flottant si nécessaire */
}
/* Texte de l'infobulle */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Positionnez le texte d'infobulle - voir l'exemple ci-dessous */
position: absolute;
z-index: 1;
}
/* Affichez le texte d'infobulle lorsque le curseur de la souris est sur le conteneur d'infobulle */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Passer la souris dessus</div>
<span class="tooltiptext">Texte d'infobulle</span>
</div>
توضيح الأمثلة
HTML:
استخدم عنصر القالب (مثل <div>) وأضف "tooltip" النوع. عندما يضع المستخدم مؤشر الفأرة على هذا <div>،
يوجد نص الإشارة التفاعلية في class="tooltiptext" في العناصر المنسوخة داخل العنصر (مثل <span>).
CSS:
tooltip النوع يستخدم position:relative، لوضع نص الإشارة التفاعلية (position:absolute). يرجى الانتباه أيضًا،
tooltiptext النوع يتم حفظ نص الإشارة التفاعلية. بوضع فحص، هو مخفي ويظهر عند التفاعل بالمؤشر (أنظر أدناه). لقد أضفنا بعض الأساليب الأساسية: عرض 120 بكسل، خلفية سوداء، نص أبيض، نص وسطي وواسع 5 بكسل للهوامش العلوية والسفلية (padding).
CSS border-radius الخاصية تضيف زوايا رonde aux textes de l'infobulle.
عندما يضع المستخدم فأتره على class="tooltip" في <div>،:hover المحدد用于 عرض نص الإشارة التفاعلية.
تحديد الإشارة التفاعلية
في هذا المثال، الإشارة التفاعلية موجودة على اليمين للنص المتواصل (left:105%). يرجى الانتباه أيضًا،top:-5px للضغط عليها في منتصف عنصر التحكم الخاص بالقالب. نستخدم الرقم 5 لأن لدي النص الإشارة التفاعلية داخل الهوامش العلوية والسفلية 5 بكسل. إذا زادت الهوامش الداخلية، يرجى زيادة 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: -5px;
border-width: 5px;
border-style: solid;
border-color: black clear clear clear;
}
النتيجة:
توضيح الأمثلة
ضع السهم في الداخل من نافذة التلميح: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: clear clear black clear;
}
النتيجة:
هذا المثال يوضح كيفية إضافة سهم إلى اليسار في نافذة التلميح:
السهم إلى اليسار
.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: clear black clear clear;
}
النتيجة:
هذا المثال يوضح كيفية إضافة سهم إلى اليمين في نافذة التلميح:
السهم إلى اليمين
.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: clear clear clear black;
}
النتيجة:
تدرج التلميحات (الرسوم المتحركة)
إذا كنت ترغب في التدرج في النصوص التلميحية التي ستظهر قريبًا، يمكنك استخدام CSS transition الخاصية مع opacity عند استخدام الخاصية مع الخاصية الأخرى، وتحول من غير مرئي تمامًا إلى 100٪ مرئي في عدد الثواني المحدد (في المثال هو 1 ثانية):
مثال
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- الصفحة السابقة رسوم متحركة CSS
- الصفحة التالية تصميم الصور الخاصة بـ CSS
