W3.CSS Tooltips
مرر مؤشر الماوس فوق الجمل أدناه:
لندن هي عاصمة إنجلترا.(9 million inhabitants)
لندن 9 million inhabitants هي عاصمة إنجلترا.
فئات W3.CSS Tooltip
يوفر W3.CSS فئات تلميح الأدوات التالية:
| فصل | يعرّف |
|---|---|
| w3- تلميح | عنصر تلميح الأداة |
| w3- النص | نص تلميح الأداة |
عنصر تلميح ونص تلميح أداة
تعرض تلميحات الأدوات نصًا (أو محتوى آخر) عندما تحوم فوق عنصر HTML.
تحدد فئة w3-tooltip العنصر المراد المرور فوقه (حاوية تلميح الأدوات).
تحدد فئة النص w3 نص تلميح الأداة .
تحوم فوق الجملة أدناه:
لندن هي عاصمة إنجلترا.(9 million inhabitants)
مثال
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
تلميح كعلامة
تحوم فوق الجملة أدناه:
لندن 9 million inhabitants هي عاصمة إنجلترا.
مثال
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
تلميح الصورة
قم بالمرور فوق هذه الصورة لمشاهدة التأثير:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
مثال (نص قبل الصورة)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
مثال (نص بعد الصورة)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
تلميح الموضع المطلق
إذا كنت تريد ظهور تلميح الأداة في موضع مطلق ، فضع نص تلميح الأداة باستخدام CSS:
مثال
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
تلميح ملون
إذا كنت تريد تلميحًا ملونًا ، فاستخدم فئات الألوان w3 :
مثال
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
تلميح مدور
إذا كنت تريد تلميح أداة دائريًا ، فاستخدم فئات w3- round :
مثال
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
تلميح أداة صغير
إذا كنت تريد تلميحًا صغيرًا ، فاستخدم فئة w3-small :
مثال
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
تلميح أداة صغيرة
إذا كنت تريد تلميحًا صغيرًا ، فاستخدم فئة w3-tiny :
مثال
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
تلميح أداة كبير
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>