%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (آخرین فرصت ها)
سبد (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 مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی