در این بخش یاد میگیرید چطور 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
را مقداردهی اولیه کنید.
1 2 |
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) |
ساخت تولتیپ در بوت استرپ
برای ایجاد یک Tooltip در بوت استرپ، کافی است ویژگی data-bs-toggle="tooltip"
را به عنصر مورد نظر اضافه کنید. این ویژگی به بوت استرپ اعلام میکند که عنصر باید دارای Tooltip باشد. محتوای داخل Tooltip نیز با ویژگی title
تعیین میشود. اگر با این ساختارها آشنا نیستید، پیشنهاد میکنیم ابتدا سری به صفحه آموزش بوت استرپ بزنید و با اصول اولیه آن آشنا شوید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltips</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Bootstrap tooltip creation</h4> <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
Tooltip روی لینک ها در بوت استرپ
میتوانید برای لینک ها نیز از Tooltip استفاده کنید. فقط کافی است ویژگی data-bs-toggle
را به عنصر لینک اضافه کنید.
در ادامه یک مثال ساده از نحوه استفاده را مشاهده میکنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltip</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Tooltip on link</h4> <p class="muted">The <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
میتوانید در کد HTML خود از هرکدام از ویژگیهای
title
یاdata-bs-title
استفاده کنید. وقتی ازtitle
استفاده میکنید، بوت استرپ (با کمک Popper) هنگام رندر کردن عنصر، آن را بهصورت خودکار بهdata-bs-title
تبدیل میکند.
Tooltip سفارشی در بوت استرپ
بوت استرپ این امکان را فراهم کرده است که با استفاده از کلاس سفارشی data-bs-custom-class="custom-tooltip"
، ظاهر Tooltip را مطابق نیاز خود تغییر دهید.
در ادامه یک مثال از نحوه استفاده از این قابلیت را میبینید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltip</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Custom Tooltip</h4> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Tooltip is created as custom tooltip."> Custom tooltip </button> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
تعیین موقعیت Tooltip
برای تعیین موقعیت نمایش Tooltip، چهار گزینه در اختیار دارید: بالا (top)، پایین (bottom)، چپ (left) و راست (right).
بهصورت پیشفرض، Tooltip در بالای عنصر نمایش داده میشود.
برای تغییر موقعیت، میتوانید از ویژگی data-bs-placement
استفاده کنید و مقدار دلخواه را به آن اختصاص دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Tooltip</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body class="p-3 m-0 border-0 bd-example tooltip-demo"> <h4>Tooltip example - Position</h4> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Top Tooltip"> Top Tooltip </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Right Tooltip"> Right Tooltip </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip"> Bottom Tooltip </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Left Tooltip"> Left Tooltip </button> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
Tooltip با محتوای HTML سفارشی
در مثال زیر، یک Tooltip را مشاهده میکنید که داخل آن از محتوای HTML سفارشی استفاده شده است. این روش به شما اجازه میدهد تا متن، تگهای HTML یا حتی استایلهای خاص را درون Tooltip قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltips</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Bootstrap tooltip creation with HTML</h4> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
Markup
برای ایجاد یک Tooltip روی هر عنصر HTML، فقط کافی است از یک ویژگی دادهای (data attribute) و ویژگی title
استفاده کنید.
بوت استرپ هنگام اجرای Tooltip، یک ساختار ساده HTML تولید میکند که بهصورت پیشفرض موقعیت آن در بالا (top) عنصر قرار میگیرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltips</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Bootstrap tooltip markup</h4> <!-- HTML to write --> <a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a> <!-- Generated markup by the plugin --> <div class="tooltip bs-tooltip-top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Markup for a tooltip </div> </div> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
Tooltip روی عناصر غیرفعال (disabled)
کاربران نمیتوانند روی عناصری که دارای ویژگی disabled
هستند کلیک کنند، ماوس را روی آنها ببرند یا با صفحه کلید فوکوس کنند. به همین دلیل، نمیتوان Tooltip را مستقیماً روی این نوع عناصر فعال کرد.
برای حل این مشکل، عنصر مورد نظر را داخل یک تگ واسط مانند <div>
یا <span>
قرار دهید و Tooltip را روی آن عنصر والد تعریف کنید.
همچنین برای اینکه کاربر بتواند با صفحه کلید روی این عنصر فوکوس کند، ویژگی tabindex="0"
را به آن اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltips</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Tooltip on Disabled Element</h4> <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled"> <button class="btn btn-secondary" type="button" disabled>Button Disabled</button> </span> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
تنظیمات Tooltips در بوت استرپ
میتوانید گزینههای مختلفی را با استفاده از ویژگیهای داده ای (data attributes) به Tooltip اضافه کنید. برای این کار، نام گزینه را به پیشوند data-bs-
اضافه کرده و مقدار آن را بهصورت ویژگی HTML تنظیم کنید. بهعنوان مثال: data-bs-boundary="{value}"
.
وقتی از ویژگیهای داده ای برای تعیین تنظیمات استفاده میکنید، دقت کنید که نام گزینهها باید به صورت “kebab-case” نوشته شوند، نه به صورت “camelCase”.
برای نمونه، بهجای data-bs-fallbackPlacements="[array]"
باید از این قالب استفاده کنید:data-bs-fallback-placements="[array]"
.
در ادامه، یک نمونه کد را میبینید که در آن گزینههای مختلف بهصورت ویژگیهای دادهای (data attributes) به کلاس data-bs-
اضافه شدهاند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tooltips - Options</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Tooltip options</h4> <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body> </html> |
جدول گزینه های قابل استفاده برای 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 را فعال کند: کلیک، هاور، فوکوس یا دستی. |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۲ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس