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

مرجع کار با JS Tooltip در Bootstrap 4

دوره های مرتبط با این مقاله

مرجع کار با JavaScript Tooltip در Bootstrap 4:

کادر محاوره ای Tooltip یک جعبه pop-up کوچک است که در هنگام عبور موس از روی یک المنت ظاهر شده و معمولا برای نمایش پیام، اطلاعات یا اخطار به کاربر از آن استفاده می شود. برای دریافت اطلاعات بیشتر راجع به کادر محاوره ای Tooltip به بخش آموزش کار با المنت Tooltip در بوت استرپ 4، سایت تحلیل داده بروید.

آموزش فعال سازی کادر Tooltip با Data Attribute :

خاصیت data-toggle=” Tooltip” باعث فعال سازی کادر محاوره ای tooltip در المنت می شود. همچنین خاصیت title، متنی که می خواهید درون کادر tooltip نمایش داده شود را تعیین می کند. مثال : در کد مثال عملی زیر، یک کادر اخطار tooltip را در یک تگ لینک a ایجاد کرده ایم که با عبور موس از روی آن، ظاهر می شود.

آموزش فعال سازی کادر tooltip با جاوا اسکریپت :

کادرهای محاوره ای tooltip یک افزونه (plugin) مختص CSS نیستند، و برای استفاده از آنها بایستی ابتدا توسط jQuery فراخوانی و مقداردهی اولیه شوند. برای این منظور، همانند کد عملی زیر، بایستی المنت مورد نظر را انتخاب کرده و متد tooltip() را برای آن اجرا نمایید :

مثال 2

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
امتحان کنید

آموزش کار با ویژگی ها (options) کادر tooltip :

ویژگی ها (options) را می توانید از طریق خواص data attributes یا کدهای جاوا اسکریپت، به کادر محاوره ای tooltip، اضافه کنید. برای استفاده از data-attributes، بایستی نام ویژگی را به data اضافه نمایید، همانند data-delay. در جدول زیر، کلیه ویژگی ها (options) قابل استفاده در کادر tooltip را به همراه توضيح و كاربرد را نشان داده ايم :

نام
نوع
مقدار پیش فرض
توضیح
animation
Boolean
true
تعیین می کند آیا افکت CSS fade transition (ظاهر و مخفی شدن تدریحی المنت) به کادر tooltip اعمال شود (true) یا نشود (false).
Container
متنی string یا درست/غلط Boolean
false
کادر tooltip به یک المنت خاص اضافه می کند، برای مثال container:body.
delay
عدد number یا شی object
صفر
مدت زمانی که طول می کشد تا کادر tooltip نمایان و مخفی شود را بر حسب میلی ثانیه تعیین می کند. جهت تعیین یک مدت زمان متفاوت جهت ظاهر شدن و مدت متفاوت جهت مخفی شدن بایستی از ساختار شی زیر استفاده کنید. برای مثال delay”{show:500,hide:100}، که در آن 500 میلی ثانیه طول می کشد تا تدریجا ظاهر شده و 100 میلی ثانیه هم طول می کشد تا مخفی شود.
html
Boolean
false
این خاصیت تعیین می کند آیا کادر tooltip بایستی تگ های HTML را قبول کند (true) یا قبول نکند (false). توجه داشته باشید که تگ HTML بایستی درون خاصیت title یا ویژگی data-title وارد شود. هنگامی که روی مقدار false که مقدار پیش فرض (default) هم است، تنظیم شود، متد jQuery () text که مقدار پیش فرض (default) هم است، تنظیم شود، متد jQuery ()text، استفاده خواهد شد. اگر از حملات XSS Attack نگران هستید، از متد فوق حتما استفاده کنید.
placement
متنی string
“top”
موقعیت ظاهر شدن کادر tooltip را نسبت به المنت مرتبط با آن، مشخص می کند. انواع مقادیر قابل استفاده عبارتند از :
  • ”top” : در بالای عنصر ظاهر می شود.
  • ”bottom” : در پایین عنصر اضافه می شود.
  • “left” : در سمت چپ عنصر ظاهر می شود.
  • ”right” : در سمت راست عنصر ظاهر می شود.
  • auto : در این حالت، مرورگر به صورت خودکار محل قرارگیری tooltip را مشخص می کند. برای مثال اگر روی مقدار “auto left” تنظیم شود، در سمت چپ ظاهر خواهد شد و اگر امکان ش نباشد در سمت راست.

به همین ترتیب از روی مقدار “auto top” تنظیم شود، در بالای عنصر ظاهر می شود و اگر امکانش نباشد در پایین عنصر نمایش داده می شود.

selector
متنی String یا درست/غلط Boolean.
False.
این خاصیت، عنصر را به یک المنت دیگر متصل می کند.
template.
متنی string.
ندارد
کد HTML لازم جهت ایجاد tooltip را تعیین می کند. عنوان title tooltip درون عنصر با کلاس tooltip-inner قرار می گیرد. همچنان فلش (arrow) کادر tooltip درون عنصر با کلاس tooltip-arrow درج می شود. عنصر مادر یا دربرگیرنده کادر tooltip هم بایستی دارای کلاس tooltip باشد.
title
متنی String
متنی String
معنی که می خواهیم در کادر tooltip نمایش داده شود را تعیین می کند.
trigger
متنی String
“hover focus”
روشی که المنت tooltip فعال و نمایش داده شود را تعیین می کند، که می تواند یکی از مقادیر زیر را داشته باشد :
  • ”Click” " با کلیک بر روی عنصر ظاهر می شود.
  • “hover” : بر عبور موس از روی عنصر ظاهر می شود.
  • ”focus” : زمانی ظاهر می شود که عنصر focus صفحه را بدست می آورد (مثل کلیک یا زدن دکمه Tab و ..).
  • ”manual” : به صورت دستی، کادر tooltip ظاهر می شود.
نکته :

برای تعیین بیش از یک پارامتر، آن ها را با کاما از هم جدا کنید.

offset
عدد number
صفر
میزان اختلاف ارتفاع نمایش از عنصر مادر (offset) را تعیین می کند.
fallback Placement
متنی String یا آرایه Array
“flip”
تعیین می کند کادر tooltip در هنگام مخفی شدن و برگشتن، چه موقعیتی را انتخاب کند.
boundary
متنی String یا عنصر
“ScrollParent”
محدوده خارج شدن المنت از صفحه یا عنصر دربرگیرنده آن را تعیین می کند که می تواند یکی از مقادیر “vierport” یا “window” یا “ScrollParent” و یا عنصر HTML مادر آن را دریافت کند.

آموزش کار با متدها (Methods) عنصر tooltip :

در جدول زیر، کلیه متدها (Methods) قابل استفاده در عنصر tooltip را با کاربرد، توضیح داده است.

متد
توضیحات
متد tooltip(“options”)
این متد بر حسب ویژگی (option) ای که دریافت می کند، کادر tooltip را ظاهر می کند. در ادامه انواع مقادیر ممکن برای option را توضیح داده ایم.
متد tooltip(“show”)
کادر tooltip را ظاهر می کند.
متد tooltip(“hide”)
کادر tooltip را مخفی می کند.
متد tooltip(“toggle”)
وضعیت عنصر tooltip را تغییر می دهد (از حالت نمایش به مخفی و برعکس).
متد tooltip(“dispose”)
عنصر tooltip را در صفحه نابود می کند.

آموزش کار با رویداد (Events) عنصر tooltip :

در جدول زیر، کلیه رویدادهای قابل استفاده برای عنصر tooltip در بوت استرپ 4 را به همراه کاربرد، معرفی کرده ایم.

رویداد
توضیح
رویداد show.bs.tooltip
زمانی اتفاق می افتد که کادر tooltip در حال ظاهر شدن و نمایش است.
رویداد shown.bs.tooltip
زمانی اتفاق می افتد که کادر tooltip کاملا ظاهر شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
رویداد hide.bs.tooltip
زمانی اتفاق می افتد که کادر tooltip در حال مخفی شدن است.
رویداد hidden.bs.tooltip
زمانی اتفاق می افتد که کادر tooltip کاملا مخفی شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
  • 62
  •    56
  • تاریخ ارسال :   1398/09/06

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .