نوارهای ابزار

مستندات و نمونه هایی برای اضافه کردن وسایل ابزار بوت استرپ سفارشی با CSS و JavaScript با استفاده از CSS3 برای انیمیشن ها و داده های داده برای ذخیره سازی عنوان محلی.

بررسی اجمالی

چیزهایی که باید هنگام استفاده از افزونه Tooltip بدانید:

• Tooltips برای موقعیت یابی به کتابخانه شخص ثالث Popper. js متکی است. شما باید قبل از bootstrap. js popper. min. js را درج کنید یا از bootstrap. bundle. min. js / bootstrap. bundle. js استفاده کنید که حاوی popper. js است تا بتوانند کار کنند!
• اگر JavaScript ما را از منبع می سازید ، به use. js نیاز دارد.
• به دلایل عملکرد ، ابزار ابزار انتخاب می شود ، بنابراین باید خودتان آنها را آغاز کنید.
• نوک ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.
• کانتینر را مشخص کنید: "بدن" برای جلوگیری از ایجاد مشکلات در مؤلفه های پیچیده تر (مانند گروه های ورودی ، گروه های دکمه ای و غیره).
• تنظیمات ابزار بر روی عناصر پنهان کار نخواهد کرد.
• ابزار ابزار برای عناصر . disabled یا غیرفعال باید بر روی یک عنصر بسته بندی ایجاد شود.
• هنگامی که از لینک هایی که چندین خط دارند ، ایجاد می شود ، نوک ابزار متمرکز خواهد شد. از فضای سفید استفاده کنید: NowRap ؛در S برای جلوگیری از این رفتار.
• قبل از حذف عناصر مربوطه از DOM ، باید ابزار ابزار پنهان شود.

همه اینها را گرفتید؟عالی ، بیایید ببینیم که چگونه آنها با چند نمونه کار می کنند.

مثال: در همه جا ، وسایل ابزار را فعال کنید

یکی از راه های اولیه سازی تمام روزهای ابزار در یک صفحه ، انتخاب آنها توسط ویژگی داده های همگرایی آنها است:

مثال ها

برای دیدن نکات ابزار در زیر پیوندهای زیر حرکت کنید:

شلوار تنگ در سطح بعدی keffiyeh که احتمالاً از آنها نشنیده اید. غرفه عکس ریش جین خام لتراپرس وگان پیام رسان وگان استومپتون. مزرعه به جدول Seitan ، Fixie Fixie پایدار McSweeney quinoa 8 بیتی آمریکایی دارای یک وینیل چمربای تری ریچاردسون است. Beard Stumptown ، Cardigans Banh Mi Lomo Thundercats. بیودیزل توفو ویلیامسبورگ مارفا ، چهار چمبرای پاکسازی وگان لوکو مک سوئینی. یک صنعتگر واقعاً طعنه آمیز ، هر چه Keytar ، صحنه های مزرعه به میز به میز ، توییتر توییتر ، با استفاده از ویروس قهوه تک بر روی قهوه ، جین Raw Cred Raw Cred را کنترل می کند.

برای دیدن چهار مسیر ابزار ابزار: بالا ، راست ، پایین و سمت چپ روی دکمه های زیر حرکت کنید.

و با HTML سفارشی اضافه شده:

استفاده

افزونه Tooltip محتوا و نشانه گذاری را در صورت تقاضا ایجاد می کند و به طور پیش فرض از وسایل ابزار پس از عنصر ماشه آنها استفاده می کند.

از طریق JavaScript ، ابزار ابزار را تحریک کنید:

نشان

نشانه مورد نیاز برای یک ابزار ابزار فقط یک ویژگی داده و عنوان در عنصر HTML است که می خواهید یک ابزار ابزار داشته باشید. نشانه تولید یک ابزار ابزار بسیار ساده است ، اگرچه به موقعیتی نیاز دارد (به طور پیش فرض ، توسط افزونه تنظیم شده است).

کار کردن برای کاربران صفحه کلید و کاربران فناوری کمکی کار می کند

شما فقط باید به عناصر HTML که به طور سنتی قابل تمرکز و تعاملی هستند (مانند پیوندها یا کنترل فرم) به عناصر HTML اضافه کنید. اگرچه عناصر HTML دلخواه (مانند S) را می توان با افزودن ویژگی Tabindex = "0" مورد توجه قرار داد ، اما این باعث می شود که زبانه به طور بالقوه آزار دهنده و گیج کننده بر روی عناصر غیر فعال برای کاربران صفحه کلید متوقف شود. علاوه بر این ، بیشتر فن آوری های کمکی در حال حاضر ابزار ابزار را در این شرایط اعلام نمی کنند.

علاوه بر این ، فقط به Hover به عنوان ماشه برای ابزار ابزار خود متکی نیست ، زیرا این امر باعث می شود که ابزار ابزار شما برای کاربران صفحه کلید غیرممکن شود.

عناصر غیرفعال

عناصر با ویژگی غیرفعال تعاملی نیستند ، به این معنی که کاربران نمی توانند تمرکز کنند ، شناور شوند یا روی آنها کلیک کنند تا یک ابزار ابزار (یا Popover) ایجاد کنند. به عنوان یک راه حل ، شما می خواهید با استفاده از TabIndex = "0" ، ابزار ابزار را از یک بسته بندی یا به صورت ایده آل با صفحه کلید ساخته شده و بر روی عنصر غیرفعال غلبه کنید.

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا JavaScript منتقل کرد. برای ویژگی های داده ، نام گزینه را به داده ها اضافه کنید ، همانطور که در داده-آنینگ = "".

ابزار ابزار را به یک عنصر خاص اضافه می کند. مثال: کانتینر: "بدن". این گزینه به ویژه در این زمینه مفید است که به شما امکان می دهد تا ابزار ابزار را در جریان سند در نزدیکی عنصر تحریک قرار دهید - که مانع از شناور ابزار از عنصر تحریک در هنگام تغییر اندازه پنجره می شود.

تأخیر در نمایش و پنهان کردن ابزار ابزار (MS) - در مورد نوع ماشه دستی اعمال نمی شود

اگر یک عدد تهیه شود ، تأخیر در هر دو مخفی/نمایش اعمال می شود

ساختار شی: تأخیر:

اجازه دهید HTML در ابزار ابزار باشد.

اگر درست باشد ، برچسب های HTML در عنوان Tooltip در ابزار ابزار ارائه می شود. اگر نادرست باشد ، از روش متن jQuery برای وارد کردن محتوا در DOM استفاده می شود.

اگر نگران حملات XSS هستید از متن استفاده کنید.

نحوه قرار دادن ابزار ابزار - خودکار |بالا |پایین |سمت چپ |درست. هنگامی که خودکار مشخص می شود ، به صورت پویا از ابزار ابزار مجدد استفاده می کند.

هنگامی که یک تابع برای تعیین محل قرارگیری استفاده می شود ، با گره DOM Tooltip به عنوان اولین آرگومان و گره DOM عنصر تحریک به عنوان دوم خود خوانده می شود. این زمینه روی نمونه ابزار تنظیم شده است.

پایه HTML را برای استفاده در هنگام ایجاد ابزار ابزار استفاده کنید.

عنوان Tooltip به داخل . tooltip-inner تزریق می شود.

. Arrow به فلش ابزار ابزار تبدیل خواهد شد.

بیرونی ترین عنصر بسته بندی باید دارای کلاس . tooltip و نقش = "Tooltip" باشد.

اگر ویژگی عنوان وجود ندارد ، مقدار پیش فرض عنوان.

اگر تابعی داده شود، با این مجموعه مرجع به عنصری که راهنمای ابزار به آن متصل است فراخوانی می شود.

راهنمای ابزار چگونه راه اندازی می شود - کلیک کنید |شناور |تمرکز |کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید.

'دستی' نشان می دهد که راهنمای ابزار از طریق روش های . tooltip('show'), . tooltip('hide') و . tooltip('toggle') به صورت برنامه ای راه اندازی می شود. این مقدار را نمی توان با هیچ محرک دیگری ترکیب کرد.

شناور کردن به خودی خود منجر به راهنمایی‌های ابزاری می‌شود که نمی‌توانند از طریق صفحه‌کلید راه‌اندازی شوند، و تنها در صورتی باید از آن‌ها استفاده کرد که روش‌های جایگزین برای انتقال همان اطلاعات برای کاربران صفحه‌کلید وجود داشته باشد.

ویژگی های داده برای نکات ابزار فردی

همانطور که در بالا توضیح داده شد، می‌توان گزینه‌هایی را برای راهنمایی‌های ابزار جداگانه از طریق استفاده از ویژگی‌های داده مشخص کرد.

مواد و روش ها

روش ها و انتقال های ناهمزمان

همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند. آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند. علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد.

$(). tooltip(گزینه ها)

یک کنترل کننده راهنمای راهنمای ابزار را به مجموعه عناصر متصل می کند.

. tooltip('show')

راهنمای ابزار یک عنصر را نشان می دهد. قبل از اینکه راهنمای ابزار واقعاً نشان داده شود (یعنی قبل از اینکه رویداد show. bs. tooltip رخ دهد) به تماس‌گیرنده باز می‌گردد. این یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود. راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.

. tooltip ('پنهان کردن')

راهنمای ابزار یک عنصر را پنهان می کند. قبل از اینکه راهنمای ابزار واقعاً پنهان شود (یعنی قبل از اینکه رویداد hidden. bs. tooltip رخ دهد) به تماس‌گیرنده برمی‌گردد. این یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود.

. tooltip('toggle')

راهنمای ابزار یک عنصر را تغییر می دهد. قبل از اینکه راهنمای ابزار واقعاً نشان داده یا پنهان شود (یعنی قبل از اینکه رویداد show. bs. tooltip یا hidden. bs. tooltip رخ دهد) به تماس‌گیرنده باز می‌گردد. این یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود.

. tooltip('dispose')

راهنمای ابزار یک عنصر را پنهان و از بین می برد. راهنمایی‌های ابزاری که از تفویض اختیار استفاده می‌کنند (که با استفاده از گزینه انتخاب‌کننده ایجاد می‌شوند) نمی‌توانند به صورت جداگانه روی عناصر ماشه‌ای نزول از بین بروند.

. tooltip ('فعال کردن')

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

. tooltip ('غیرفعال کردن')

قابلیت نمایش راهنمای یک عنصر را حذف می کند. راهنمای ابزار فقط در صورت فعال شدن مجدد قابل نمایش است.