ابزارکهای Tippy
موقعیت تولتیپها
یک کتابخانه تولتیپ و پاپاور بسیار قابل تنظیم با استفاده از جاوا اسکریپت وانیلا
تولتیپ پیشفرض tippy به این صورت نمایش داده میشود که هیچ گزینهای به آن داده نشود. این تولتیپ دارای یک انیمیشن پر کردن بکدراپ جذاب است!
بالا
پایین
چپ
راست
بالا-شروع
بالا-پایان
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top">بالا</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="bottom">پایین</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="left">چپ</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="right">راست</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top-start">بالا-شروع</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top-end">بالا-پایان</span>
تولتیپهای پیکاندار
پیکانها به سمت عنصر مرجع اشاره میکنند.
پیشفرض
گرد
پهن
باریک
کوچک
بزرگ
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-animation="fade">پیشفرض</span>
<span class="btn btn-sm bg-primary text-white" title="من یک تولتیپ Tippy هستم!" tabindex="0" data-plugin="tippy" data-tippy-arrowType="round" data-tippy-animation="fade">گرد</span>
<span class="btn btn-sm bg-primary text-white" title="من یک تولتیپ Tippy هستم!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scaleX(1.5)" data-tippy-animation="fade">پهن</span>
<span class="btn btn-sm bg-primary text-white" title="من یک تولتیپ Tippy هستم!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scaleX(0.75)" data-tippy-animation="fade">باریک</span>
<span class="btn btn-sm bg-primary text-white" title="من یک تولتیپ Tippy هستم!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scale(0.75)" data-tippy-animation="fade">کوچک</span>
<span class="btn btn-sm bg-primary text-white" title="من یک تولتیپ Tippy هستم!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scale(1.35)" data-tippy-animation="fade">بزرگ</span>
تولتیپهای پیکاندار
پیکانها به سمت عنصر مرجع اشاره میکنند.
پیشفرض
گرد
پهن
باریک
کوچک
بزرگ
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-animation="fade">پیشفرض</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrowType="round" data-tippy-animation="fade">گرد</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scaleX(1.5)" data-tippy-animation="fade">پهن</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scaleX(0.75)" data-tippy-animation="fade">باریک</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scale(0.75)" data-tippy-animation="fade">کوچک</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrowTransform="scale(1.35)" data-tippy-animation="fade">بزرگ</span>
تولتیپهای تعاملی
تولتیپها میتوانند تعاملی باشند، به این معنی که زمانی که روی آنها هاور میکنید یا کلیک میکنید مخفی نمیشوند.
تعاملی (هاور)
تعاملی (کلیک)
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-interactive="true">تعاملی (هاور)</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-interactive="true" data-tippy-trigger="click">تعاملی (کلیک)</span>
مدت زمان تولتیپها
یک تولتیپ میتواند مدت زمان انتقال متفاوتی داشته باشد.
0ms
200ms
1000ms
[500ms, 200ms]
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-duration="0">0ms</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-duration="200">200ms</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-duration="1000">1000ms</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-duration="[500, 200]">[500ms, 200ms]</span>
انیمیشنهای تولتیپ
تولتیپها میتوانند انیمیشنهای متفاوتی داشته باشند.
دور شدن
نزدیک شدن
محو شدن
بزرگ شدن
دید پرسپکتیو
اینرسی (دور شدن)
اینرسی (نزدیک شدن)
اینرسی (بزرگ شدن)
اینرسی (دید پرسپکتیو)
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-away" data-tippy-arrow="true">Shift away</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-toward" data-tippy-arrow="true">Shift toward</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="fade" data-tippy-arrow="true">Fade</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="scale" data-tippy-arrow="true">Scale</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="perspective" data-tippy-arrow="true">Perspective</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-away" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (shift-away)</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-toward" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (shift-toward)</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="scale" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (scale)</span>
<span class="btn btn-sm bg-primary text-white" title="من یک پیام هستم!" tabindex="0" data-plugin="tippy" data-tippy-animation="perspective" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (perspective)</span>
تم های راهنمای ابزار
یک راهنمای ابزار میتواند هر نوع تمی که میخواهید داشته باشد! ایجاد یک تم سفارشی بسیار آسان است.
شفاف
سبک
گرادیان
<span class="btn btn-sm bg-primary text-white" title="See-through!" tabindex="0" data-plugin="tippy" data-tippy-theme="translucent">شفاف</span>
<span class="btn btn-sm bg-primary text-white" title="A light Tooltip !" tabindex="0" data-plugin="tippy" data-tippy-theme="light" data-tippy-arrow="true">سبک</span>
<span class="btn btn-sm bg-primary text-white" title="Awesome Gradient !" tabindex="0" data-plugin="tippy" data-tippy-theme="gradient">گرادیان</span>
راهنماهای ابزار متفرقه
Tippy دارای ویژگیهای بسیاری است و به طور مداوم در حال بهبود است.
دنبال کردن نشانگر
لمس و نگه داشتن
فاصله
افست
کوچک
بزرگ
<span class="btn btn-sm bg-primary text-white" title="See-through!" tabindex="0" data-plugin="tippy" data-tippy-theme="translucent">شفاف</span>
<span class="btn btn-sm bg-primary text-white" title="A light Tooltip !" tabindex="0" data-plugin="tippy" data-tippy-theme="light" data-tippy-arrow="true">سبک</span>
<span class="btn btn-sm bg-primary text-white" title="Awesome Gradient !" tabindex="0" data-plugin="tippy" data-tippy-theme="gradient">گرادیان</span>