עצות כלים

סקירה כללית

דברים שכדאי לדעת בעת שימוש בתוסף טיפים:

• עצות כלים מסתמכות על ספריית הצד השלישי Popper לצורך מיקום. עליך לכלול popper.min.js לפני bootstrap.js או להשתמש ב bootstrap.bundle.min.js/ bootstrap.bundle.jsהמכיל Popper כדי שטיפים לכלים יפעלו!
• טיפים לכלים ניתנים להצטרפות מסיבות ביצועים, לכן עליך לאתחל אותם בעצמך .
• עצות כלים עם כותרות באורך אפס לעולם אינן מוצגות.
• ציין container: 'body'כדי להימנע מעיבוד בעיות ברכיבים מורכבים יותר (כמו קבוצות הקלט שלנו, קבוצות לחצנים וכו').
• הפעלת עצות כלים על אלמנטים מוסתרים לא תעבוד.
• יש להפעיל עצות כלים עבור רכיבים .disabledאו disabledאלמנטים על רכיב עטיפה.
• כאשר מופעלים מהיפר-קישורים המשתרעים על פני שורות מרובות, עצות הכלים ירוכזו. השתמש white-space: nowrap;ב- <a>s שלך כדי להימנע מהתנהגות זו.
• יש להסתיר עצות כלים לפני שהרכיבים התואמים שלהם יוסרו מה-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 מייצר תוכן וסימון לפי דרישה, וכברירת מחדל מציב עצות כלים אחרי אלמנט הטריגר שלהם.

הפעל את הסבר הכלי באמצעות JavaScript:

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')
})

סימון

הסימון הנדרש עבור תיאור כלים הוא רק dataתכונה titleוברכיב ה-HTML ברצונך לקבל תיאור כלי. הסימון שנוצר של תיאור כלים הוא די פשוט, אם כי הוא דורש מיקום (כברירת מחדל, מוגדר על 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>

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- 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.tooltipאו מתרחש). hidden.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

שיטה סטטית המאפשרת לך לקבל את מופע ה-Tooltip המשויך לרכיב 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()