سبد (0)

ToolTipهای واکنشگرا


 کلاس های  Tooltip در W3.CSS

W3.CSS  کلاس های tooltip  زیر را فراهم کرده است:

کلاس تعریف
w3-tooltip عنصر tooltip
w3-text متن tooltip

عنصر Tooltip و متن Tooltip

tooltip  ها متن  (یا محتواهای دیگر) را زمانی که موس روی یک عنصر html  قرار میگیرد، نمایش میدهد.

کلاس  w3-tooltip عنصری را برای زمانی که موس روی عنصر  میرود، تعریف میکند.(tooltip container)

کلاس  w3-text متن tooltip  را تعریف میکند:

مثال

<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
خودتان امتحان کنيد »

Tooltip مانند یک برچسب

مثال

<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
خودتان امتحان کنيد »

تصاویر Tooltip

مثال (متن قبل از تصویر)

<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>
خودتان امتحان کنيد »

Tooltip با موقعیت دهی مطلق

اگرشما میخواهید tooltip در یک موقعیت خاص نمایش داده شود،به متن tooltip  با 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>
خودتان امتحان کنيد »

 Tooltipرنگی

اگر شما میخواهید یک tooltip  رنگی داشته باشید ،از کلاس های w3-color  استفاده کنید:

مثال

<span class="w3-text w3-tag w3-red">9 million inhabitants</span>
خودتان امتحان کنيد »

 Tooltip گرد شده

کلاس های w3-round برای گردکردن tooltip  استفاده میشوند:

مثال

<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
خودتان امتحان کنيد »

Tooltip  کوچک

اگر شما یک tooltip  کوچک میخواهید،از کلاس w3-small استفاده کنید:

مثال

<span class="w3-text w3-tag w3-small">9 million inhabitants</span>
خودتان امتحان کنيد »

 Tooltip خیلی کوچک

اگر شما در یک tooltip  خیلی کوچک میخواهید از کلاس w3-tiny استفاده کنید:

مثال

<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
خودتان امتحان کنيد »

Tooltip  بزرگ

کلاس های w3-large برای tooltip  های بزرگ استفاده می شوند:

مثال

<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
خودتان امتحان کنيد »

Tooltip متحرک شده

کلاس w3-animate-opacity برای محو کردن یک tooltip استفاده می شود:

مثال

<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه