ToolTipهای واکنشگرا
کلاس های Tooltip در W3.CSS
W3.CSS کلاس های tooltip زیر را فراهم کرده است:
| کلاس | تعریف |
|---|---|
| w3-tooltip | عنصر tooltip |
| w3-text | متن tooltip |
عنصر Tooltip و متن Tooltip
tooltip ها متن (یا محتواهای دیگر) را زمانی که موس روی یک عنصر html قرار میگیرد، نمایش میدهد.
کلاس w3-tooltip عنصری را برای زمانی که موس روی عنصر میرود، تعریف میکند.(tooltip container)
کلاس w3-text متن tooltip را تعریف میکند:
مثال
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Tooltip مانند یک برچسب
مثال
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
تصاویر Tooltip
مثال (متن قبل از تصویر)
<p class="w3-text">A car is a...</p>
<img src="/img_car.jpg" alt="Car">
</div>
مثال (متن بعد از تصویر)
<img src="/img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div>
Tooltip با موقعیت دهی مطلق
اگرشما میخواهید tooltip در یک موقعیت خاص نمایش داده شود،به متن tooltip با css موقعیت دهی کنید:
مثال
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Tooltipرنگی
اگر شما میخواهید یک tooltip رنگی داشته باشید ،از کلاس های w3-color استفاده کنید:
Tooltip گرد شده
کلاس های w3-round برای گردکردن tooltip استفاده میشوند:
Tooltip کوچک
اگر شما یک tooltip کوچک میخواهید،از کلاس w3-small استفاده کنید:
Tooltip خیلی کوچک
اگر شما در یک tooltip خیلی کوچک میخواهید از کلاس w3-tiny استفاده کنید:
Tooltip بزرگ
کلاس های w3-large برای tooltip های بزرگ استفاده می شوند:
Tooltip متحرک شده
کلاس w3-animate-opacity برای محو کردن یک tooltip استفاده می شود:
مثال
- نوشته شده توسط زهرا داوودی
- بازدید: 3077