نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1663
تاریخ بروزرسانی ۷ اردیبهشت ۱۴۰۱

آموزش ساخت تولتیپ با جی کوئری

تولتیپ چیست؟

تولتیپ را می توان به هر عنصر فعال (آیکون ها، پیوندهای متنی، دکمه ها و غیره) در یک صفحه متصل کرد. آنها توضیحاتی را برای عنصر خود ارائه می دهند. بنابراین، تولتیپ بسیار متنی و خاص هستند. در این مبحث از مجموعه آموزش های وب یار می خواهیم نحوه ساخت تولتیپ را آموزش دهیم.

ابتدا توسط جی کوئری یک تابع می سازیم تا برای تولتیپ tooltip از آن برای تول تیپ لینک ها استفاده کنیم آموزش ساختن تولتیپ

tooltip_preview

tooltip

محوریت کار این تابع، گرفتن توضیحات (Description) از خاصیت (attribute) عنوان (title) یک لینک، حذف حالت پیشفرض و تعیین حالتی جدیداست و این عملیات رو میتوانیم به راحتی با کمک جی کوئری پیاده سازی کنیم. به همین منظور، تابع زیر را تعریف کردیم:

JQuery

در ساخت تولتیپ با جی کوئری توابع مهم ما عبارتند از:

  • attr (تابع پیشفرض جی کوئری) که به همراه مقدار title، وظیفه گرفتن توضیحات خاصیت یک عنوان رو دارد
  • init_tooltip مربوط به بحث موقعیت (position) سازی
  • remove_tooltip هم برای این که وقتی موس رو از روی یک لینک برداشتیم، کادر تولتیپ رو مخفی کنه…

اما یک بخش مهم دیگه در تابع بالا، تعریف یک متغیر با نام targets که مقدار خاصیت “rel=”tooltip رو (در صورت موجود بودن) میگیرد و انجام کلیه توابع رو محدود به وجود این متغیر میکند. حالا با توجه به این توضیحات، جهت استفاده از تابع بالا، تنها کافی است که خاصیت  “rel=”tooltip رو به لینک هامون اضافه کنیم. به عنوان نمونه:

HTML

* توجه: یادتون باشه که برای کار کردن تولتیپ، حتما باید لینک هاتون دارای خاصیت عنوان (title) باشند.

تا اینجا بخش مهمی از کار رو انجام دادیم، سپس با استفاده از نام آی دی tooltip (که تعریفش رو در متغیر tooltip ریخته بودیم)، یک استایل زیبا رو در فرم زیر ایجاد میکنیم که شباهت زیادی به tooltip در بوت استرپ دارد:

CSS

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.