Balloon.css : ابزار ساده قرار دادن Tooltip با CSS خالص

- visibility ۰ mode_comment

در این مطلب میخوایم کار با ابزار ساده Balloon.css رو بهتون آموزش بدیم تا بتونیم با استفاده از اون برای المنتهای مورد نظرمون Tooltip قرار بدیم.

Balloon.css : ابزار ساده قرار دادن Tooltip با CSS خالص

با استفاده از این ابزار ساده و سبک میتونین با اضافه کردن چند ویژگی، Tooltip های مورد نظرتون رو به المنتهای مختلف نسبت بدین. این ابزار تماما با استفاده از CSS این کار رو انجام میده و از هیچ کد Javascript استفاده نمی کند. پروژه Github این ابزار رو میتونین در اینجا ببینید. میتونین فایل CSS مورد نظر رو دانلود کنید.

شروع کار با Balloon.css

در ابتدا یک فایل بنام Balloon.html به وجود میاریم کدهای زیر رو درونش قرار میدیم:

همونطور که دیدید کدهای ساده مربوط به HTML رو قرار دادیم. حالا برای اضافه کردن این ابزار میتونین فایل دانلود شده رو با استفاده از تگ link اضافه کنید. بصورت زیر:

روش دیگه ای که میتونین از این ابزار استفاده کنید، قرار دادن CDN مربوط به اون در پروژتون هست. بصورت زیر:

میبینید که نسخه Minify یا فشرده شده اون رو بصورت CDN قرار دادیم. بهمین راحتی. خب حالا نوبت به استفاده از این ابزار میرسه.

در ابتدا یک دکمه قرار میدیم تا با هاور کردن بر روی اون، تولتیپ مورد نظر نمایش داده بشه. درون ویژگی data-balloon میتونین متنی که میخواید در Tooltip نمایش داده بشه رو مشخص کنید. بصورت زیر:

هنوز کارمون به پایان نرسیده و باید یچیزای دیگه رو مشخص کنیم.

تعیین موقعیت Tooltip

با استفاده از ویژگی data-balloon-pos میتونیم موقعیت قرارگیری تولتیپ رو مشخص کنیم. این ویژگی 4 مقدار رو قبول میکنه:

  • up : بالا
  • down : پایین
  • right : راست
  • left : چپ

خب حالا 4 تا دکمه قرار میدم و 4 موقعیت مختلف بالا رو براشون در نظر میگیرم. بصورت زیر:

خروجی در مرورگر بصورت زیر میشه:

میبینید که چه راحت موقعیت رو مشخص کردیم.

طول و اندازه تولتیپ

بصورت پیش فرض تولتیپ بصورت یک متن تک خطی نمایش داده میشه و به میزان متنی که درونش قرار میگیره، بستگی ندارد. اما شما میتونین با استفاده از ویژگی data-balloon-length اندازه تولتیپ رو متناسب با سلیقتون تغییر بدین. این ویژگی 5 مقدار رو قبول میکنه:

  • small : تولتیپ کوچک
  • medium : تولتیپ متوسط
  • large : تولتیپ بزرگ
  • xlarge : تولتیپ بسیار بزرگ
  • fit : در این حالت عرض تولتیپ برابر با عرض المنتی که تولتیپ به اون تعلق دارد، خواهد شد.

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

اگر از ویژگی data-balloon-visible استفاده کنید، تولتیپ بصورت دائم نمایش داده میشه و دیگه نیازی نیست که شما بر روی اون هاور کنید. بصورت زیر:

همچنین شما میتونین از متد setAttribute موجود در Javascript استفاده کنید و در زمانی که نیاز داشتید، این ویژگی رو به المنت مورد نظر اضافه کنید تا تولتیپ برای اون نمایش داده بشه و دیگه نیاز نباشه که کاربر بر روی المنت هاور بکنه.

قرار دادن آیکون در تولتیپ

شما میتونین در تولتیپ ها به راحتی آیکون و Emoji یا شکل و علامت مورد نظرتون رو قرار بدین. بصورت زیر:

خروجی بصورت زیر میشه:

به همین راحتی.

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

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.