ابزار ساده قرار دادن Tooltip با CSS خالص
دوشنبه, ۲۱ اسفند ۱۳۹۶، ۰۴:۰۳ ب.ظ
شروع کار با Balloon.css
در ابتدا یک فایل بنام Balloon.html به وجود میاریم کدهای زیر رو درونش قرار میدیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iransystem.blog.ir - Balloon.css</title>
</head>
<body>
</body>
</html>
همونطور که دیدید کدهای ساده مربوط به HTML رو قرار دادیم. حالا برای اضافه کردن این ابزار میتونین فایل دانلود شده رو با استفاده از تگ 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">
میبینید که نسخه Minify یا فشرده شده اون رو بصورت CDN قرار دادیم. بهمین راحتی. خب حالا نوبت به استفاده از این ابزار میرسه.
در ابتدا یک دکمه قرار میدیم تا با هاور کردن بر روی اون، تولتیپ مورد نظر نمایش داده بشه. درون ویژگی data-balloon میتونین متنی که میخواید در Tooltip نمایش داده بشه رو مشخص کنید. بصورت زیر:
<button data-balloon="Whats up!">Hover me!</button>
هنوز کارمون به پایان نرسیده و باید یچیزای دیگه رو مشخص کنیم.
تعیین موقعیت Tooltip
با استفاده از ویژگی data-balloon-pos میتونیم موقعیت قرارگیری تولتیپ رو مشخص کنیم. این ویژگی 4 مقدار رو قبول میکنه:
up : بالا
down : پایین
right : راست
left : چپ
خب حالا 4 تا دکمه قرار میدم و 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>
خروجی در مرورگر بصورت زیر میشه:
میبینید که چه راحت موقعیت رو مشخص کردیم.
طول و اندازه تولتیپ
بصورت پیش فرض تولتیپ بصورت یک متن تک خطی نمایش داده میشه و به میزان متنی که درونش قرار میگیره، بستگی ندارد. اما شما میتونین با استفاده از ویژگی data-balloon-length اندازه تولتیپ رو متناسب با سلیقتون تغییر بدین. این ویژگی 5 مقدار رو قبول میکنه:
small : تولتیپ کوچک
medium : تولتیپ متوسط
large : تولتیپ بزرگ
xlarge : تولتیپ بسیار بزرگ
fit : در این حالت عرض تولتیپ برابر با عرض المنتی که تولتیپ به اون تعلق دارد، خواهد شد.
نمایش شرطی و دائمی تولتیپ
اگر از ویژگی data-balloon-visible استفاده کنید، تولتیپ بصورت دائم نمایش داده میشه و دیگه نیازی نیست که شما بر روی اون هاور کنید. بصورت زیر:
<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button>
همچنین شما میتونین از متد setAttribute موجود در Javascript استفاده کنید و در زمانی که نیاز داشتید، این ویژگی رو به المنت مورد نظر اضافه کنید تا تولتیپ برای اون نمایش داده بشه و دیگه نیاز نباشه که کاربر بر روی المنت هاور بکنه.
قرار دادن آیکون در تولتیپ
شما میتونین در تولتیپ ها به راحتی آیکون و Emoji یا شکل و علامت مورد نظرتون رو قرار بدین. بصورت زیر:
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
خروجی بصورت زیر میشه:
به همین راحتی
- ۹۶/۱۲/۲۱
مثلا کد زیر:
<p title="HELLO">سلام</p>
طوری بشه که بدون اینکه همیشه تکه کد زیر رو به تگ مورد نظرمون اضافه کنیم؟؟
data-balloon="Whats up!" data-balloon-pos="up"
درضمن دنبال شدید ممنون میشم دنبال کنید.☺