نکات ابزار

بررسی اجمالی

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

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

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

مثال ها

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

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

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

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

نکات ابزار سفارشی

شما می توانید ظاهر نکات ابزار را با استفاده از متغیرهای CSS سفارشی کنید . ما یک کلاس سفارشی با آن تنظیم data-bs-custom-class="custom-tooltip"می کنیم تا ظاهر سفارشی خود را در بر بگیرد و از آن برای نادیده گرفتن یک متغیر CSS محلی استفاده کنیم.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

جهت ها

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

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

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

با SVG:

CSS

متغیرها

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، راهنمای ابزار اکنون از متغیرهای CSS محلی .tooltipبرای سفارشی‌سازی در زمان واقعی استفاده می‌کند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

متغیرهای Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

استفاده

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

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

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

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

نشانه گذاری

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

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

گزینه ها

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

از Bootstrap 5.2.0، همه مؤلفه‌ها از یک ویژگی داده رزرو شده تجربیdata-bs-config پشتیبانی می‌کنند که می‌تواند پیکربندی مؤلفه ساده را به عنوان یک رشته JSON در خود جای دهد. هنگامی که یک عنصر دارای data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"ویژگی باشد، مقدار نهایی titleخواهد بود 456و ویژگی های داده جداگانه مقادیر داده شده در را لغو می کنند data-bs-config. علاوه بر این، ویژگی های داده موجود می توانند مقادیر JSON مانند data-bs-delay='{"show":0,"hide":150}'.

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

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

مواد و روش ها

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

مناسبت ها

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()