السلام عليكم ورحمة الله وبركاتة.... سنتكلم عن خاصية الـ Tooltip css هذة الخاصية رائعة جداً تعطى مظهر جذاب لمدونتك / موقعك هى تستخدم بشكل أفضل سنشرح لك ما هى خاصية الـ Tooltip css وفيما تستخدم وكيفية إستخدامها.
ما هى خاصية Tooltip 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">مدونة هادى ستور
<span class="tooltiptext">مخزنك المفضل</span>
</div>
توضيح أكثر:
* عليك اولاً بكتابة الكود بلغة الـ HTML وإستخدام عنصر <div> مثل ما هو موضح فى المثال السابق هذا يتطلب ولو معرفة بسيطة عن HTML & CSS لإنجاز هذا العمل وحتى إذا كنت لا نجيد هذا لا عليك سأوجهك على موقع يقوم بعمل هذا والآن دعنا نوضح لك كلمة ( مدونة هادى ستور ) هى الكلمة الأساسية ولكن نحتاج ان نجلب كود الكلمة الذى سيظهر عند مرور الماوس سنحتاج لهذا العنصر وجلبة فى الكود <span> ونعطى له class أى تعريف له مثل مخزنك المفضل ستلاحظ
<span class="tooltiptext"> هذا كل ما نفعله بإستخدام HTML ، والآن عليك إنجاز الجزء الأكبر وهو إكمال المهمة بإستخدام CSS .
<span class="tooltiptext"> هذا كل ما نفعله بإستخدام HTML ، والآن عليك إنجاز الجزء الأكبر وهو إكمال المهمة بإستخدام CSS .
* بإستخدام CSS راح نظبط خاصية tooltip إذا لاحظنا المثال السابق سنجد خاصية position وهى خاصة بضبط الكلمة هذة تكلمنا عنها فى تدوينة سابقة توجهة إليها من فضلك إذا كنت تريد معرفة الخواص بهذة الخاصية الذهاب للتدوينة .
- راح نظبط الآن الألوان و padding و
border-radius والخاصة بالحواف الدائرية إذا أحببت إضافتها
ضبط وضع التلميحات:
- يمكنك التحكم فى وضع التلميحات على أى جهة تريدها يمين،يسار،أعلى،أسفل هذا ما سنوضحة الآن.
- إذا أردناوضح التلميحات من جهة اليمين سنستخدم هذا
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
top: -5px;
left: 105%;
}
وإذا أردت إظهارها من جهة اليسار سيتم وضع هذا الكود :
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
top: -5px;
right: 105%;
}
أم إذا أردت أن تظهر فى الأعلى أو الأسفل ولاحظ إستخدامنا margin-left
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
* Tooltip Arrows
يعنى التحكم فى السهم الخاص بالمعلومات الإضافية الذى ستضاف يمكنك التحكم به لإظهارة فى جنب معين فعليك لإستخدام class
.tooltip .tooltiptext::after {::after مع إستخدام الـ content بعد إضافة هذا سيظهر وكانه فقاعة كلام مثال للتوضيح بعد إضافة السهم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;
}
أرجو أن أكون قدمت شرح فى صورة مبسطة وأتمنى للجميع التقدم إلى الأمام دائما لا تنسى تتابعنا فى الخواص الأخرى والهامة
2 تعليقات
أحسنت الشرح أخ هادى
ردحذفليك وحشة يا غالى :)
شكرا ليك محمود
حذفإنت أكتر والله =D