رفتن به مطلب

Mohsen_Nirouzad

پست های پیشنهاد شده

Balloon.CSS یک ابزار CSS میباشد که به شما اجازه میدهد بدون استفاده از حتی یک خط کدنویسی جاوا اسکریپت، به متون خود Tooltip بیافزایید.

 

logo.svg

 

 

چگونه کار کنم؟

به فایل خود کد زیر را بیافزایید:

 

<link rel="stylesheet" href="https://1go.ir/ لینک ها تنها برای اعضای سایت قابل نمایش است.  ">

 

برای تولید یک tooltip در بالای یک دکمه:

 

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

 

برای تولید یک tooltip در چپ یک دکمه:

 

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

 

برای تولید یک tooltip در راست یک دکمه:

 

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

 

برای تولید یک tooltip در راست پایین دکمه:

 

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

 

 

اندازه ها

در حالت عادی، tooltip ها تمام متن خود را در یک خط نمایش میدهند، برای تبدیل آن به چند خط باید اندازه را تعریف کنید.

تولتیپ کوچک دکمه:

 

<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button>

 

تولتیپ متوسط دکمه:

 

<button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button>

 

تولتیپ بزرگ دکمه:

 

<button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button>

 

تولتیپ بسیار بزرگ دکمه:

 

<button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>

 

تولتیپ متناسب با متن دکمه:

 

<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button>

 

 

سایر آموزش ها و نمونه ها را در وبسایت رسمی ببینید.

لینک ها:

 

لینک ها تنها برای اعضای سایت قابل نمایش است. | لینک ها تنها برای اعضای سایت قابل نمایش است. | لینک ها تنها برای اعضای سایت قابل نمایش است. | لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

توجه: برای ذخیره فایل css از سرور 20 اسکریپت، کلید های Ctrl+S را بگیرید و در محل مناسب ذخیره کنید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 2 ماه پیش ...

خیلی عالیه مرسی

 

 

 

 

 

_______________________________________________________________

لینک ها تنها برای اعضای سایت قابل نمایش است. با سئوی فوق العاده

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...