نکات ابزار
مستندات و مثالهایی برای افزودن راهنمای ابزار Bootstrap سفارشی با CSS و جاوا اسکریپت با استفاده از CSS3 برای انیمیشنها و ویژگیهای داده برای ذخیرهسازی عنوان محلی.
نکاتی که باید هنگام استفاده از افزونه tooltip بدانید:
- نکات ابزار برای موقعیت یابی به کتابخانه شخص ثالث Popper.js متکی هستند . شما باید popper.min.js را قبل از bootstrap.js اضافه کنید یا از
bootstrap.bundle.min.js
/bootstrap.bundle.js
که حاوی Popper.js است استفاده کنید تا راهنمای ابزار کار کند! - اگر جاوا اسکریپت ما را از منبع میسازید، به آن نیاز دارد
util.js
. - راهنمای ابزار به دلایل عملکردی انتخاب شده است، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
- راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.
container: 'body'
برای جلوگیری از بروز مشکلات در مؤلفههای پیچیدهتر (مانند گروههای ورودی، گروههای دکمهها و غیره) آن را مشخص کنید .- راهاندازی نکات ابزار در عناصر پنهان کار نخواهد کرد.
- نکات ابزار برای
.disabled
یاdisabled
عناصر باید بر روی یک عنصر پوششی فعال شوند. - هنگامی که از لینک هایی که چندین خط را تشکیل می دهند، راهنمایی های ابزار در مرکز قرار می گیرند. برای جلوگیری از این رفتار از
white-space: nowrap;
روی s خود استفاده کنید.<a>
- نکات ابزار باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
همه اینها را فهمیدید؟ عالی است، بیایید ببینیم آنها با چند مثال چگونه کار می کنند.
یک راه برای مقداردهی اولیه تمام نکات ابزار در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید data-toggle
:
برای دیدن نکات ابزار، نشانگر را روی پیوندهای زیر نگه دارید:
شلوارهای چسبان سطح بعدی کفیه که احتمالا اسمش را نشنیده اید. غرفه عکس ریش خام جین لترپرس وگان کیسه پیام رسان stumptown. سیتان مزرعه تا میز، پوشاک آمریکایی 8 بیتی کینوا پایدار فیکس مکسوئینی دارای یک مجلسی وینیل تری ریچاردسون است. استامپ تاون ریش، ژاکت کش باف پشمی بانه می لومو تندرکت. توفو بیودیزل ویلیامزبورگ مارفا، چهار لوکو مکسوئینی پاکسازی وگان شامبری. یک صنعتگر واقعا کنایهآمیز، با هر کیتار ، منظرهای از مزرعه تا میز بانکی آستین توییتر، قهوههای جین خام تک اصل فریگان کرد را مدیریت میکند.
ماوس را روی دکمههای زیر نگه دارید تا چهار جهت راهنمای ابزار را ببینید: بالا، راست، پایین و چپ.
و با HTML سفارشی اضافه شده:
افزونه tooltip محتوا و نشانهگذاری را بر اساس تقاضا تولید میکند و بهطور پیشفرض راهنماییهای ابزار را بعد از عنصر ماشه قرار میدهد.
راهنمای ابزار را از طریق جاوا اسکریپت فعال کنید:
نشانه گذاری مورد نیاز برای یک Tooltip فقط یک data
ویژگی است و title
در عنصر HTML شما می خواهید یک Tooltip داشته باشید. نشانه گذاری ایجاد شده از یک راهنمای ابزار نسبتاً ساده است، اگرچه به یک موقعیت نیاز دارد (به طور پیش فرض، top
توسط افزونه تنظیم شده است).
ایجاد راهنمایی ابزار برای کاربران صفحه کلید و فناوری کمکی
شما فقط باید نکات ابزار را به عناصر HTML اضافه کنید که به طور سنتی قابل تمرکز روی صفحه کلید و تعاملی هستند (مانند پیوندها یا کنترل های فرم). اگرچه عناصر دلخواه HTML (مانند <span>
s) را می توان با افزودن tabindex="0"
ویژگی قابل تمرکز کرد، اما این باعث می شود که بالقوه آزاردهنده و گیج کننده برگه های عناصر غیر تعاملی برای کاربران صفحه کلید اضافه شود. علاوه بر این، اکثر فناوری های کمکی در حال حاضر راهنمای ابزار را در این شرایط اعلام نمی کنند.
علاوه بر این، تنها به عنوان محرک راهنمای راهنمای ابزار خود متکی نباشید hover
، زیرا این کار باعث میشود که راهنماییهای ابزار شما برای کاربران صفحهکلید فعال نشود.
عناصر دارای disabled
ویژگی تعاملی نیستند، به این معنی که کاربران نمیتوانند برای راهاندازی یک راهنمای ابزار (یا پاپاور) روی آنها تمرکز کنند، ماوس را نگه دارند یا کلیک کنند. به عنوان یک راه حل، میخواهید که راهنمای ابزار را از یک لفاف <div>
یا <span>
با استفاده از صفحه کلید قابل تمرکز ایدهآل فعال کنید و عنصر غیرفعال را tabindex="0"
لغو کنید .pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
انیمیشن | بولی | درست است، واقعی | یک انتقال محو CSS را به راهنمای ابزار اعمال کنید |
ظرف | رشته | عنصر | نادرست | نادرست | راهنمای ابزار را به یک عنصر خاص اضافه می کند. مثال: |
تاخیر انداختن | شماره | هدف - شی | 0 | تأخیر در نمایش و پنهان کردن راهنمای ابزار (ms) - برای نوع ماشه دستی اعمال نمی شود اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود ساختار شیء عبارت است از: |
html | بولی | نادرست | اجازه دادن به HTML در راهنمای ابزار. اگر درست باشد، تگهای HTML در راهنمای ابزار در راهنمای ابزار اگر نگران حملات XSS هستید از متن استفاده کنید. |
تعیین سطح | رشته | عملکرد | 'بالا' | نحوه قرار دادن راهنمای ابزار - خودکار | بالا | پایین | چپ | درست. هنگامی که یک تابع برای تعیین مکان استفاده می شود، با گره DOM به عنوان اولین آرگومان و عنصر راه اندازی گره DOM به عنوان دومین آرگومان فراخوانی می شود. متن |
انتخابگر | رشته | نادرست | نادرست | اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند. در عمل، از این برای فعال کردن محتوای پویا HTML برای افزودن پاپاور استفاده میشود. این و یک مثال آموزنده را ببینید . |
قالب | رشته | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
پایه HTML برای استفاده در هنگام ایجاد راهنمای ابزار. راهنمای ابزار به
بیرونی ترین عنصر wrapper باید |
عنوان | رشته | عنصر | عملکرد | '' |
اگر تابعی داده شود، با |
ماشه | رشته | "تمرکز شناور" | راهنمای ابزار چگونه راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید.
|
انحراف | شماره | رشته | 0 | افست راهنمای ابزار نسبت به هدفش. برای اطلاعات بیشتر به اسناد افست Popper.js مراجعه کنید . |
جایگزینی | رشته | آرایه | تلنگر | اجازه دهید مشخص کنید که پوپر از کدام موقعیت در بازگشت استفاده می کند. برای اطلاعات بیشتر به اسناد رفتاری Popper.js مراجعه کنید |
مرز | رشته | عنصر | 'scrollParent' | مرز محدودیت سرریز از راهنمای ابزار. مقادیر 'viewport' , 'window' , 'scrollParent' یا مرجع HTMLElement (فقط جاوا اسکریپت) را می پذیرد. برای اطلاعات بیشتر به اسناد preventOverflow Popper.js مراجعه کنید . |
ویژگی های داده برای نکات ابزار فردی
همانطور که در بالا توضیح داده شد، میتوان گزینههایی را برای راهنماییهای ابزار جداگانه از طریق استفاده از ویژگیهای داده مشخص کرد.
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
یک کنترل کننده راهنمای راهنمای ابزار را به مجموعه عناصر متصل می کند.
راهنمای ابزار یک عنصر را نشان می دهد. قبل از اینکه نکته ابزار واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد. shown.bs.tooltip
این یک راهاندازی «دستی» راهنمای ابزار در نظر گرفته میشود. راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.
راهنمای ابزار یک عنصر را پنهان می کند. قبل از اینکه نکته ابزار واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد. hidden.bs.tooltip
این یک راهاندازی «دستی» راهنمای ابزار در نظر گرفته میشود.
راهنمای ابزار یک عنصر را تغییر می دهد. قبل از اینکه نکته ابزار واقعاً نشان داده یا پنهان شود (یعنی قبل از اینکه رویداد یا رویداد رخ دهد) به تماس گیرنده برمی گردد. این یک راهاندازی «دستی» راهنمای ابزار در نظر گرفته میشود.shown.bs.tooltip
hidden.bs.tooltip
راهنمای ابزار یک عنصر را پنهان و از بین می برد. راهنماییهای ابزاری که از تفویض اختیار استفاده میکنند (که با استفاده از selector
گزینه ایجاد میشوند ) را نمیتوان بهصورت جداگانه در عناصر ماشهای از بین برد.
به راهنمای ابزار یک عنصر قابلیت نشان دادن را می دهد. راهنمای ابزار به طور پیش فرض فعال است.
قابلیت نمایش راهنمای یک عنصر را حذف می کند. راهنمای ابزار فقط در صورت فعال شدن مجدد قابل نمایش است.
قابلیت نمایش یا پنهان شدن راهنمای ابزار یک عنصر را تغییر می دهد.
موقعیت راهنمای ابزار یک عنصر را به روز می کند.
نوع رویداد | شرح |
---|---|
show.bs.tooltip | این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. |
نشان داده شده.bs.tip tool | این رویداد زمانی فعال می شود که راهنمای ابزار برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). |
hide.bs.tooltip | این رویداد بلافاصله پس از hide فراخوانی متد نمونه فعال می شود. |
hidden.bs.tooltip | این رویداد زمانی فعال می شود که راهنمای ابزار از کاربر مخفی شود (منتظر تکمیل انتقال CSS می شود). |
درج شده.bs.tooltip | این رویداد پس از show.bs.tooltip رویداد زمانی که الگوی راهنمای ابزار به DOM اضافه شده است فعال می شود. |