نکات ابزار

بررسی اجمالی

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

• نکات ابزار برای موقعیت یابی به کتابخانه شخص ثالث Popper متکی هستند . شما باید popper.min.js را قبل از bootstrap.js اضافه کنید یا از bootstrap.bundle.min.js/ bootstrap.bundle.jsکه حاوی Popper است استفاده کنید تا راهنمای ابزار کار کند!
• راهنمای ابزار به دلایل عملکردی انتخاب شده است، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
• راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.
• container: 'body'برای جلوگیری از بروز مشکلات در مؤلفه‌های پیچیده‌تر (مانند گروه‌های ورودی، گروه‌های دکمه‌ها و غیره) آن را مشخص کنید .
• راه‌اندازی نکات ابزار در عناصر پنهان کار نخواهد کرد.
• نکات ابزار برای .disabledیا disabledعناصر باید بر روی یک عنصر پوششی فعال شوند.
• هنگامی که از لینک هایی که چندین خط را تشکیل می دهند، راهنمایی های ابزار در مرکز قرار می گیرند. برای جلوگیری از این رفتار از white-space: nowrap;روی s خود استفاده کنید.<a>
• نکات ابزار باید قبل از حذف عناصر مربوطه از DOM پنهان شوند.
• راهنمای ابزار را می توان به لطف عنصری در داخل یک DOM سایه فعال کرد.

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

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

یک راه برای مقداردهی اولیه تمام نکات ابزار در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید data-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

مثال ها

برای دیدن نکات ابزار، نشانگر را روی پیوندهای زیر نگه دارید:

ماوس را روی دکمه‌های زیر نگه دارید تا چهار جهت راهنمای ابزار را ببینید: بالا، راست، پایین و چپ. هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

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

<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>

با SVG:

ساس

متغیرها

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

استفاده

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

راهنمای ابزار را از طریق جاوا اسکریپت فعال کنید:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

نشانه گذاری

نشانه گذاری مورد نیاز برای یک Tooltip فقط یک dataویژگی است و titleدر عنصر HTML شما می خواهید یک Tooltip داشته باشید. نشانه گذاری ایجاد شده از یک راهنمای ابزار نسبتاً ساده است، اگرچه به یک موقعیت نیاز دارد (به طور پیش فرض، topتوسط افزونه تنظیم شده است).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

عناصر دارای disabledویژگی تعاملی نیستند، به این معنی که کاربران نمی‌توانند برای راه‌اندازی یک راهنمای ابزار (یا پاپاور) روی آن‌ها تمرکز کنند، ماوس را نگه دارند یا کلیک کنند. به‌عنوان راه‌حل، می‌خواهید راهنمای ابزار را از یک لفاف <div>یا <span>با استفاده از کیبورد قابل تمرکز ایده‌آل فعال tabindex="0"کنید.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-animation="". هنگام عبور گزینه ها از طریق ویژگی های داده، حتماً نوع حروف نام گزینه را از camelCase به kebab-case تغییر دهید. به عنوان مثال، به جای استفاده از data-bs-customClass="beautifier"، استفاده کنید data-bs-custom-class="beautifier".

استفاده از تابع باpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

مواد و روش ها

نشان می دهد

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

tooltip.show()

پنهان شدن

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

tooltip.hide()

تغییر وضعیت

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

tooltip.toggle()

در معرض قرار دادن

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

tooltip.dispose()

فعال کردن

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

tooltip.enable()

غیر فعال کردن

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

tooltip.disable()

toggleEnabled

قابلیت نمایش یا پنهان شدن راهنمای ابزار یک عنصر را تغییر می دهد.

tooltip.toggleEnabled()

به روز رسانی

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

tooltip.update()

getInstance

روش ایستا که به شما امکان می دهد نمونه راهنمای مرتبط با یک عنصر DOM را دریافت کنید

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

روش ایستا که به شما امکان می‌دهد نمونه راهنمای مرتبط با یک عنصر DOM را دریافت کنید، یا در صورتی که اولیه نشده بود، نمونه جدیدی ایجاد کنید.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

مناسبت ها

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()