نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip) از سری آموزش های تک قسمتی است.

 

تولتیپ (Tooltip)

قبلا توضیح داده ایم که تولتیپ چیست و حتی درباره نحوه ساخت آن در بوت استرپ ۳ نیز توضیح داده ایم اما برای آن دسته از دوستانی که مستقیما قصد یادگیری همین مقاله را دارند باید بگوییم که تولتیپ به توضیحاتی گفته میشود که وقتی موس روی المانی میرود کادری باز میشود و نمایش داده میشود.

 

نحوه ساخت تولتیپ

برای ساخت تولتیپ نیاز به انجام کار پیچیده ای نیست تنها کافیست شما دو خط جیکوئری را یاد بگیرید . قبل از هر چیز شما یاید بدانید که قابلیت تولتیپ را به هر تگی میتوانید بدهید ما در اینجا این قابلیت را به تگ  a داده ایم برای این کار کافیست attribute  با نام data-toggle و مقدار tooltip را به تگ خود بدهید همچنین با attribute با نام tittle میتوانید محتوای داخل تولتیپ را تعیین کنید قطعه کد جیکوئری را نیز در مثالی برای شما آورده ایم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

موقعیت نمایش tooltip

شما میتوانید تعیین کنید که تولتیپ در چه جهتی باز شود یعنی شما میتوانید تولتیپ خود را به صورت دستی در یکی از ۴ جهت اصلی باز کنید برای این کار ابتدا باید attribute با نام data-placement را بسازید و برای مقدار دهی به آن از لیست زیر کمک بگیرید:

  • top : اگر این مقدار را به data-placement خود بدهید تولتیپ در بالا باز میشود.
  • right: با دادن این مقدار به  data-placement تولتیپ به سمت راست باز میشود.
  • left : اگر مقدار left را به data-placement بدهید تولتیپ در جهت چپ باز میشود.
  • bottom : و در نهایت این مقدار تولتیپ در جهت پایین را میسازد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

انیمیشن در تولتیپ

در حالت عادی به محض رفتن موس روی تولتیپ ، تولتیپ باز شده و به محض خروج موس از روی آن بسته میشود که یک ظاهر خشک و بی روح دارد اگر میخواهید حالت fade in و یا fade out را به تولتیپ خود بدهید کافیست از حالت انیمیشن استفاده کنید برای این کار باید در قسمت جیکوئری مقدار animation را اضافه کنید اگر مقدار انیمیشن را true قرار دهید انیمیشن فعال میشود و اگر false انیمیشن غیرفعال میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اختصاص دادن تولتیپ به یک container

قبل از هر چیز نحوه کاربرد این قسمت را توضیح میدهیم فرض کنید یک خط نوشته کوچک در یک کادر بزرگ دارید و میخواهید موس هر کجای این کادر رفت تولتیپ باز شود برای این حالت بهترین روش اختصاص دادن تولتیپ به container است برای این کار شما ابتدا باید یک div با کلاس مد نظر خود تعریف کنید و عبارت مد نظر خود را داخل آن بنویسید این عبارت میتواند یک تگ html باشد یا هر چیز دیگر سپس باید به کمک دستور container آن را در جیکوئری خود اضافه کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

امکان تاخیر در باز و بسته شدن تولتیپ

در حالت عادی به محض رفتن موس روی نوشته تولتیپ باز میشود و به محض خروج موس از نوشته تولتیپ بسته میشود اگر میخواهید این زمان را تغییر دهید باید از قابلیت delay در جیکوئری استفاده کنید اگر delay را به تنهایی بنویسید میتوانید یک مقدار عددی به صورت میلی ثانیه به آن بدهید اما اگر مقادیر show و hide را به آن بدهید میتوانید زمان نمایش و مخفی شدن متفاوت برای تولتیپ خود ایجاد کنید برای واضح شدن موضوع از هردو حات برای شما در کد زیر نمونه قرار داده ایم:

 

استفاده از تگ html در تولتیپ

در حالت عادی محتوایی که داخل تولتیپ نمایش داده مشود یک متن است اما شما میتوانید از تمام تگ های تعریف شده در html استفاده کنید برای اینکار باید در قسمت title جیکوئری تمام تگ های html را با محتوای مد نظرتان بنویسید سپس دستور html را برابر با true قرار دهید به همین راحتی میتوان تگ html را داخل تولتیپ نمایش داد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

تولتیپ و تغییر trigger

در حالت عادی با hover شدن موس روی المانی تولتیپ اجرا میشود اگر میخواهید این حالت را تغییر دهید به کمک trigger میتوانید ۳ حالت وجود دارد که شما میتوانید برای باز شدن تولتیپ انتخاب کنید:

  • hover : این حالت حالت پیش فرض است.
  • focus : در این حالت زمانی که شما روی المان کلیک میکنید و همچنان روی آن توجه دارید فعال است
  • click : وقتی روی المانی کلیک کنید تولتیپ باز میشود.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

 

شما میتوانید ویدیو این آموزش را به صورت آنلاین ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip): نوع فایل:mp4 حجم فایل:35.42 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.