آموزش Tooltip در بوت استرپ

در این بخش یاد می‌گیرید چطور Tooltip در بوت استرپ را به صفحه اضافه کنید. تولتیپ یک جعبه کوچک و شناور است که وقتی کاربر روی یک عنصر مثل دکمه، آیکون یا لینک کلیک می‌کند یا ماوس را روی آن نگه می‌دارد، ظاهر می‌شود.

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

نکات مهم هنگام استفاده از افزونه Tooltips

  • از آنجا که Tooltips برای تعیین موقعیت، به کتابخانه جانبی Popper وابسته هستند، لازم است فایل popper.min.js را پیش از bootstrap.js در صفحه قرار دهید. یا می‌توانید به جای آن از فایل‌های ترکیبی bootstrap.bundle.min.js یا bootstrap.bundle.js استفاده کنید که Popper را در خود دارند.

  • باید ابتدا Tooltips را مقداردهی اولیه (initialize) کنید. بوت استرپ برای بهینه‌سازی عملکرد، تولتیپ را به صورت پیش‌فرض غیرفعال نگه می‌دارد.

  • اگر مقدار ویژگی title در یک عنصر صفر باشد (یعنی رشته‌ای خالی داشته باشد)، تولتیپ نمایش داده نمی‌شود.

  • Tooltips روی عناصری که مخفی هستند اجرا نمی‌شود.

  • برای عناصر دارای کلاس .disabled یا ویژگی disabled، نمی‌توانید تولتیپ را مستقیم فعال کنید. به جای آن، عنصر را داخل یک عنصر والد قرار بدهید و تولتیپ را روی آن والد تعریف کنید.

  • برای اینکه Tooltips در مرکز عنصر قرار نگیرد، ویژگی white-space: nowrap; را روی تگ <a> یا عنصر مورد نظر اعمال کنید.

  • قبل از اینکه هر عنصری را از DOM حذف کنید، باید Tooltips مرتبط با آن را مخفی کنید. در غیر این صورت ممکن است اختلال‌های ظاهری یا عملکردی در صفحه ایجاد شود.

  • در محیط Shadow DOM هم می‌توانید تولتیپ را فعال کنید، به شرطی که از عنصر واسطه استفاده کنید.

نحوه فعال‌سازی Tooltips در بوت استرپ

برای فعال‌سازی تولتیپ در کل صفحه، باید تمام عناصر دارای ویژگی data-bs-toggle را مقداردهی اولیه کنید.

ساخت تولتیپ در بوت استرپ

برای ایجاد یک Tooltip در بوت استرپ، کافی است ویژگی data-bs-toggle="tooltip" را به عنصر مورد نظر اضافه کنید. این ویژگی به بوت استرپ اعلام می‌کند که عنصر باید دارای Tooltip باشد. محتوای داخل Tooltip نیز با ویژگی title تعیین می‌شود. اگر با این ساختارها آشنا نیستید، پیشنهاد می‌کنیم ابتدا سری به صفحه آموزش بوت استرپ بزنید و با اصول اولیه آن آشنا شوید.

ساخت تولتیپ در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip روی لینک‌ ها در بوت استرپ

می‌توانید برای لینک‌ ها نیز از Tooltip استفاده کنید. فقط کافی است ویژگی data-bs-toggle را به عنصر لینک اضافه کنید.

در ادامه یک مثال ساده از نحوه استفاده را مشاهده می‌کنید:

Tooltip روی لینک‌ ها در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

می‌توانید در کد HTML خود از هرکدام از ویژگی‌های title یا data-bs-title استفاده کنید. وقتی از title استفاده می‌کنید، بوت استرپ (با کمک Popper) هنگام رندر کردن عنصر، آن را به‌صورت خودکار به data-bs-title تبدیل می‌کند.

Tooltip سفارشی در بوت استرپ

بوت استرپ این امکان را فراهم کرده است که با استفاده از کلاس سفارشی data-bs-custom-class="custom-tooltip"، ظاهر Tooltip را مطابق نیاز خود تغییر دهید.

در ادامه یک مثال از نحوه استفاده از این قابلیت را می‌بینید:

Tooltip سفارشی در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین موقعیت Tooltip

برای تعیین موقعیت نمایش Tooltip، چهار گزینه در اختیار دارید: بالا (top)، پایین (bottom)، چپ (left) و راست (right).

به‌صورت پیش‌فرض، Tooltip در بالای عنصر نمایش داده می‌شود.

برای تغییر موقعیت، می‌توانید از ویژگی data-bs-placement استفاده کنید و مقدار دلخواه را به آن اختصاص دهید.

تعیین موقعیت Tooltip

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip با محتوای HTML سفارشی

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

Tooltip با محتوای HTML سفارشی

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Markup

برای ایجاد یک Tooltip روی هر عنصر HTML، فقط کافی است از یک ویژگی داده‌ای (data attribute) و ویژگی title استفاده کنید.

بوت استرپ هنگام اجرای Tooltip، یک ساختار ساده HTML تولید می‌کند که به‌صورت پیش‌فرض موقعیت آن در بالا (top) عنصر قرار می‌گیرد.

Markup در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip روی عناصر غیرفعال (disabled)

کاربران نمی‌توانند روی عناصری که دارای ویژگی disabled هستند کلیک کنند، ماوس را روی آن‌ها ببرند یا با صفحه کلید فوکوس کنند. به همین دلیل، نمی‌توان Tooltip را مستقیماً روی این نوع عناصر فعال کرد.

برای حل این مشکل، عنصر مورد نظر را داخل یک تگ واسط مانند <div> یا <span> قرار دهید و Tooltip را روی آن عنصر والد تعریف کنید.

همچنین برای اینکه کاربر بتواند با صفحه کلید روی این عنصر فوکوس کند، ویژگی tabindex="0" را به آن اضافه کنید.

Tooltip روی عناصر غیرفعال در بوت استرپ

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تنظیمات Tooltips در بوت استرپ

می‌توانید گزینه‌های مختلفی را با استفاده از ویژگی‌های داده ای (data attributes) به Tooltip اضافه کنید. برای این کار، نام گزینه را به پیشوند data-bs- اضافه کرده و مقدار آن را به‌صورت ویژگی HTML تنظیم کنید. به‌عنوان مثال: data-bs-boundary="{value}".

وقتی از ویژگی‌های داده ای برای تعیین تنظیمات استفاده می‌کنید، دقت کنید که نام گزینه‌ها باید به صورت “kebab-case” نوشته شوند، نه به صورت “camelCase”.

برای نمونه، به‌جای data-bs-fallbackPlacements="[array]" باید از این قالب استفاده کنید:
data-bs-fallback-placements="[array]".

تنظیمات Tooltips در بوت استرپ

در ادامه، یک نمونه کد را می‌بینید که در آن گزینه‌های مختلف به‌صورت ویژگی‌های داده‌ای (data attributes) به کلاس data-bs- اضافه شده‌اند:

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جدول گزینه های قابل استفاده برای Tooltip در بوت استرپ

در جدول زیر می‌توانید گزینه‌هایی را مشاهده کنید که بوت استرپ برای شخصی سازی Tooltip ارائه می‌دهد. این گزینه‌ها را می‌توانید با پیشوند data-bs- به عنوان ویژگی داده ای به عنصر HTML اضافه کنید:

نام گزینه (Name) نوع (Type) مقدار پیش‌فرض (Default) توضیحات (Description)
allowList object مقدار پیش‌فرض شامل تگ‌ها و ویژگی‌هایی است که در Tooltip مجاز هستند.
animation boolean true تعیین می‌کند که انیمیشن CSS (محو شدن) برای Tooltip اعمال شود یا نه.
boundary string, element 'clippingParents' محدوده‌ای که Tooltip می‌تواند در آن نمایش یابد. می‌توان از عنصر HTML نیز استفاده کرد (فقط از طریق JavaScript).
container string, element, false false مشخص می‌کند Tooltip به کدام عنصر ضمیمه شود.
customClass string, function '' کلاس‌های سفارشی که علاوه بر کلاس‌های پیش‌فرض در قالب Tooltip اضافه می‌شوند. برای افزودن چند کلاس از فاصله استفاده کنید.
delay number, object 0 زمان تاخیر در نمایش یا پنهان کردن Tooltip به میلی‌ثانیه. ساختار شی: { "show": 500, "hide": 100 }.
fallbackPlacements array ['top', 'right', 'bottom', 'left'] موقعیت‌های جایگزین در صورت نبود فضای کافی در موقعیت اصلی.
html boolean false اجازه استفاده از محتوای HTML درون Tooltip را می‌دهد.
offset array, string, function [0, 0] فاصله Tooltip از عنصر هدف. مثال: data-bs-offset="10,20"
placement string, function 'top' موقعیت اصلی Tooltip نسبت به عنصر هدف.
popperConfig null, object, function null امکان تنظیمات سفارشی برای Popper (موتور موقعیت‌دهی Tooltip).
sanitize boolean true فعال یا غیرفعال کردن فرآیند ضدعفونی کردن محتوای HTML.
sanitizeFn null, function null تابع دلخواه برای ضدعفونی کردن HTML.
selector string, false false مشخص می‌کند Tooltip برای کدام عناصر اعمال شود، با استفاده از CSS Selector.
template string (قالب پیش‌فرض HTML) ساختار پایه‌ای HTML برای ایجاد Tooltip.
title string, element, function '' متن یا محتوایی که به‌عنوان عنوان در Tooltip نمایش داده می‌شود.
trigger string 'hover focus' مشخص می‌کند چه رفتاری Tooltip را فعال کند: کلیک، هاور، فوکوس یا دستی.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

آموزش انیمیشن‌ سازی دو بعدی با موهو – خلق انیمیشن‌ های خلاقانه شبیه دیرین دیرین
  • انتشار: ۲۲ خرداد ۱۴۰۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید