امروز : دوشنبه ۲ بهمن ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

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

اضافه کردن ویژگی های مختلف به Tooltip موردنظرتان با این ابزار به راحتی انجام میگیرد.در این ابزار فقط از کد Css استفاده شده است و هیچ گونه کد JavaScript  وجود ندارد.

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Balloon.css</title>

</head>

<body>

     <!--your code-->

</body>

</html>

 

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

<link rel="stylesheet" href="./balloon.css"> 

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">

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

پس برای شروع یک Button  قرار داده تا بتوان با Hover  کردن بر روی آن Tooltip

موردنظر نمایش داده شود. و طبق کد زیر درون ویژگی data-balloon  می توانیم متنی که میخواهیم نمایش داده شود را قرار دهیم :

<button data-balloon="Whats up!">Hover me!</button>

 

 

در ادامه کار باید ویژگی های دیگه ای را اضافه کنیم:

1-تعیین موقعیت Tooltip :

ویژگی data-balloon-pos موقعیت قرارگیری tooltip را تعیین میکند:

  • Up  بالا
  • Down  پایین
  • Right  راست
  • Left  چپ

در کد زیر ویژگی گفته شده را اعمال کرده ایم:

<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>

 

 

2- طول و اندازه تولتیپ :

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

  • Small   تولتیپ کوچک
  • Medium  تولتیپ متوسط
  • Large  تولتیپ بزرگ
  • Xlarge  تولتیپ بسیار بزرگ
  • fit   در این حالت عرض تولتیپ برابر با عرض متنی که تولتیپ به اون تعلق دارد، خواهد شد.

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

ویژگی data-balloon-visible این امکان را میدهد که Tooltip به صورت دائم نمایش داده شود. و نیازی به hover  کردن نیست.

<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button>


می توان با استفاده از متد setAttribute در JavaScript  این ویژگی رو  اضافه کرد که Tooltip  نمایش داده شود و نیازی به Hover کردن نیست.

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

با استفاده از کد زیر میتوان آیکون و علامت های مختلف را در Tooltip قرار داد.

<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button>

<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>

 

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

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 45 بار دسته بندی : آموزش css دیدگاه : ۰ تاريخ : ۱۱ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

دیدگاه کاربران تعداد دیدگاه : ۰