מכשירים

איבערבליק

טינגז צו וויסן ווען ניצן די Tooltip פּלוגין:

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

וועריאַבאַלז

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, טאָאָלטיפּס איצט נוצן היגע CSS וועריאַבאַלז .tooltipפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

  --#{$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};
  

סאָס וועריאַבאַלז

$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

באַניץ

די טאָאָלטיפּ פּלוגין דזשענערייץ אינהאַלט און מאַרקאַפּ אויף מאָנען, און דורך פעליקייַט לייגט מכשירים נאָך זייער צינגל עלעמענט.

צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:

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

מאַרקאַפּ

די פארלאנגט מאַרקאַפּ פֿאַר אַ טאָאָלטיפּ איז בלויז אַ dataאַטריביוט און titleאויף די HTML עלעמענט איר ווילט האָבן אַ טאָאָלטיפּ. די דזשענערייטאַד מאַרקאַפּ פון אַ טאָאָלטיפּ איז גאַנץ פּשוט, כאָטש עס דאַרף אַ שטעלע (דורך פעליקייַט, באַשטימט 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 " צו " קעבאַב פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן 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()