نمادها

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

آموزش Bootstrap جلسه سی و یکم (Tooltip)

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

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

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

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

برای آن دسته از دوستان که نمی دانند تولتیپ چیست

تولتیپ کادری است که وقتی موس روی عبارتی میرود باز می شود و توضیحاتی راجع به عبارت می دهد

تولتیپ را می توان روی متن ، روی لینک و روی تصویر قرار داد

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

 

برای اجرای تولتیپ ما باید فایل tooltip.js و یا فایل bootstrap.js را در قالب خود بارگیری کنیم توجه داشته باشید هر دو فایل با هم نباید اجرا شوند استفاده از یکی کافیست.

تولتیپ (tooltip)

همانطور که قبل گفتیم از تولتیپ ها برای توضیحات اضافه استفاده میشود از آنجایی که تنها با قرار گرفتن موس روی المان نمایش داده میشوند در صفحه های اضافی نمیگیرند و بسیار مناسب هستند در حالت عادی و بدون بوت استرپ برای ساخت تولتیپ از دستورات before و after در css استفاده میکنیم که دردسر های خود و تسلط کافی به html و css را لازم دارد اما در بوت استرپ به راحتی میتوانید این کار را انجام دهید.

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

همانطور که در کد بالا مشخص است مقادیر قرار گرفته در script باز و بسته کد جیکوئری لازم برای اجرای تولتیپ است . تنها با اختصاص دادن attribute تولتیپ میتوان این مورد را ایجاد کرد.

 

جهت نمایش تولتیپ

در حالت پیشفرض متن تولتیپ ما در بالای نوشته نمایش داده میشود که این مورد همیشه قابل استفاده نیست گاهی بنا به نیاز و شرایط قالب ما لازم است که تولتیپ در جهتی دیگر باز شود پس در این شرایط باید از data-placement استفاده کنیم و مقدار های top و bottom و left و right به آن بدهیم. بنا به نیاز میتوان در هر کدام از چهار جهت این کار را انجام داد برای واضح شدن موضوع از کد زیر کمک بگیرید.

ما در کد بالا هر  چهار جهت را برای شما قرار دادیم تا از آن استفاده کنید.

 

شخصی سازی تولتیپ 

همانطور که میبینید در تمام کد ها ظاهر تولتیپ ثابت است و با استایل دادن معمولی تغییر نمیکند حتی اگر شما به after و before تگ خود هم استایل بدهید امکان تغییر ظاهر تولتیپ وجود ندادر شما ۲ راه دارید:

  • استایل دادن از طریق جیکوئری
  • استایل دادن به attr های تولتیپ در css

مورد دوم بسیار ساده تر است و ما به ورت اختصاصی در سلام برنامه به آن میپردازیم روشی ساده که ما به شما میگوییم این اسن که تنها به کلاسی با نام tooltip-inner استایل بدهید این کلاس اختصاصی تولتیپ است توجه کنید فقط این کلاس و نه کلاس tooltip اگر میخواهید پیکان تولتیپ را نیز تغییر دهید از کلاس tooltip-arrow بعد از کلاس tooltip-top استفاده کنید توجه کنید top باید جهت تولتیپ استفاده شده شما باشد.

برای واضح تر شدن موضوع نمونه کدی را برای شما آماده کردیم کد زیر شامل توضیحات گفته شده است:

 

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

آموزش Bootstrap جلسه سی ام (Modal)

آموزش Bootstrap جلسه سی و دوم (Popover)

 

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

 

و یا آن را در آپارات ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

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

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

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

دیدگاهتان را بنویسید

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

*

code

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