در این مطلب میخوایم کار با ابزار ساده Balloon.css رو بهتون آموزش بدیم تا بتونیم با استفاده از اون برای المنتهای مورد نظرمون Tooltip قرار بدیم.
با استفاده از این ابزار ساده و سبک میتونین با اضافه کردن چند ویژگی، Tooltip های مورد نظرتون رو به المنتهای مختلف نسبت بدین. این ابزار تماما با استفاده از CSS این کار رو انجام میده و از هیچ کد Javascript استفاده نمی کند. پروژه Github این ابزار رو میتونین در اینجا ببینید. میتونین فایل CSS مورد نظر رو دانلود کنید.
در ابتدا یک فایل بنام Balloon.html به وجود میاریم کدهای زیر رو درونش قرار میدیم:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>7Learn.com - Balloon.css</title> </head> <body> </body> </html> |
همونطور که دیدید کدهای ساده مربوط به HTML رو قرار دادیم. حالا برای اضافه کردن این ابزار میتونین فایل دانلود شده رو با استفاده از تگ link اضافه کنید. بصورت زیر:
|
1 |
<link rel="stylesheet" href="./balloon.css"> |
روش دیگه ای که میتونین از این ابزار استفاده کنید، قرار دادن CDN مربوط به اون در پروژتون هست. بصورت زیر:
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css"> |
میبینید که نسخه Minify یا فشرده شده اون رو بصورت CDN قرار دادیم. بهمین راحتی. خب حالا نوبت به استفاده از این ابزار میرسه.
در ابتدا یک دکمه قرار میدیم تا با هاور کردن بر روی اون، تولتیپ مورد نظر نمایش داده بشه. درون ویژگی میتونین متنی که میخواید در Tooltip نمایش داده بشه رو مشخص کنید. بصورت زیر:
|
1 |
<button data-balloon="Whats up!">Hover me!</button> |
هنوز کارمون به پایان نرسیده و باید یچیزای دیگه رو مشخص کنیم.
با استفاده از ویژگی میتونیم موقعیت قرارگیری تولتیپ رو مشخص کنیم. این ویژگی 4 مقدار رو قبول میکنه:
خب حالا 4 تا دکمه قرار میدم و 4 موقعیت مختلف بالا رو براشون در نظر میگیرم. بصورت زیر:
|
1 2 3 4 |
<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button> <button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button> |
خروجی در مرورگر بصورت زیر میشه:
میبینید که چه راحت موقعیت رو مشخص کردیم.
بصورت پیش فرض تولتیپ بصورت یک متن تک خطی نمایش داده میشه و به میزان متنی که درونش قرار میگیره، بستگی ندارد. اما شما میتونین با استفاده از ویژگی اندازه تولتیپ رو متناسب با سلیقتون تغییر بدین. این ویژگی 5 مقدار رو قبول میکنه:
اگر از ویژگی data-balloon-visible استفاده کنید، تولتیپ بصورت دائم نمایش داده میشه و دیگه نیازی نیست که شما بر روی اون هاور کنید. بصورت زیر:
|
1 |
<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button> |
همچنین شما میتونین از متد setAttribute موجود در Javascript استفاده کنید و در زمانی که نیاز داشتید، این ویژگی رو به المنت مورد نظر اضافه کنید تا تولتیپ برای اون نمایش داده بشه و دیگه نیاز نباشه که کاربر بر روی المنت هاور بکنه.
شما میتونین در تولتیپ ها به راحتی آیکون و Emoji یا شکل و علامت مورد نظرتون رو قرار بدین. بصورت زیر:
|
1 2 |
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button> <button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button> |
خروجی بصورت زیر میشه:
به همین راحتی.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
