Balloon.CSS

[Mohsen_Nirouzad 538]

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

 

 

 

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

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

 

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

 

برای تولید یک 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 را بگیرید و در محل مناسب ذخیره کنید.

[laruz 983]

از attr استفاده شده؟ عالیه

[Mohsen_Nirouzad 538]

از attr استفاده شده؟ عالیه

بله بر اساس خواص تگ ها تعین شده.

[salmani 0]

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

 

 

 

 

 

_______________________________________________________________

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