מכשירים
דאַקיומענטיישאַן און ביישפילן פֿאַר אַדינג מנהג באָאָטסטראַפּ מכשירים מיט CSS און דזשאַוואַסקריפּט ניצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן-בס-אַטריביאַץ פֿאַר היגע טיטל סטאָרידזש.
איבערבליק
טינגז צו וויסן ווען ניצן די Tooltip פּלוגין:
- טאָאָלטיפּס פאַרלאָזנ זיך די 3rd פּאַרטיי ביבליאָטעק פּאָפּער פֿאַר פּאַזישאַנינג. איר מוזן אַרייַננעמען popper.min.js איידער bootstrap.js אָדער נוצן
bootstrap.bundle.min.js
/bootstrap.bundle.js
וואָס כּולל פּאָפּער אין סדר פֿאַר די מכשירים צו אַרבעטן! - טאָאָלטיפּס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
- מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.
- ספּעציפיצירן
container: 'body'
צו ויסמיידן רענדערינג פּראָבלעמס אין מער קאָמפּליצירט קאַמפּאָונאַנץ (ווי אונדזער אַרייַנשרייַב גרופּעס, קנעפּל גרופּעס, עטק). - טריגערינג מכשירים אויף פאַרבאָרגן עלעמענטן וועט נישט אַרבעטן.
- מכשירים פֿאַר
.disabled
אָדערdisabled
עלעמענטן מוזן זיין טריגערד אויף אַ ראַפּער עלעמענט. - ווען טריגערד פֿון כייפּערלינגקס וואָס שפּאַן קייפל שורות, טאָאָלטיפּס וועט זיין סענטערד. ניצן
white-space: nowrap;
אויף דיין<a>
s צו ויסמיידן דעם נאַטור. - מכשירים מוזן זיין פאַרבאָרגן איידער זייער קאָראַספּאַנדינג עלעמענטן זענען אַוועקגענומען פון די DOM.
- טאָאָלטיפּס קענען זיין טריגערד דאַנק צו אַן עלעמענט אין אַ שאָטן DOM.
prefers-reduced-motion
מידיאַ אָנפֿרעג. זען די
רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .
האָט דאָס אַלץ? גרויס, לאָמיר זען ווי זיי אַרבעטן מיט עטלעכע ביישפילן.
בייַשפּיל: געבן מכשירים אומעטום
איין וועג צו ינישאַלייז אַלע מכשירים אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער 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;
באַניץ
די טאָאָלטיפּ פּלוגין דזשענערייץ אינהאַלט און מאַרקאַפּ אויף מאָנען, און דורך פעליקייַט לייגט מכשירים נאָך זייער צינגל עלעמענט.
צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
איבערפלוס auto
אוןscroll
Tooltip שטעלע פרוווט צו אויטאָמאַטיש טוישן ווען אַ פאָטער קאַנטיינער האט overflow: auto
אָדער overflow: scroll
ווי אונדזער .table-responsive
, אָבער נאָך האלט די פּאַזישאַנינג פון דער אָריגינעל פּלייסמאַנט. צו סאָלווע דעם, שטעלן די boundary
אָפּציע (פֿאַר די פליפּ מאָדיפיער ניצן די popperConfig
אָפּציע) צו קיין HTMLElement צו אָווועררייד די פעליקייַט ווערט, 'clippingParents'
, אַזאַ ווי document.body
:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
מאַרקאַפּ
די פארלאנגט מאַרקאַפּ פֿאַר אַ טאָאָלטיפּ איז בלויז אַ data
אַטריביוט און title
אויף די HTML עלעמענט איר ווילט האָבן אַ טאָאָלטיפּ. די דזשענערייטאַד מאַרקאַפּ פון אַ טאָאָלטיפּ איז גאַנץ פּשוט, כאָטש עס דאַרף אַ שטעלע (דורך פעליקייַט, באַשטימט top
דורך די פּלוגין).
מאכן מכשירים אַרבעט פֿאַר קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס
איר זאָל נאָר לייגן מכשירים צו HTML עלעמענטן וואָס זענען טראַדישאַנאַלי פאָוקיסט אויף קלאַוויאַטור און ינטעראַקטיוו (אַזאַ ווי לינקס אָדער פאָרעם קאָנטראָלס). כאָטש אַרביטראַריש HTML עלעמענטן (אַזאַ ווי <span>
s) קענען זיין פאָוקיסטאַבאַל דורך אַדינג די tabindex="0"
אַטריביוט, דאָס וועט לייגן פּאַטענטשאַלי אַנויינג און קאַנפיוזינג קוויטל סטאַפּס אויף ניט-ינטעראַקטיוו עלעמענטן פֿאַר קלאַוויאַטור יוזערז, און רובֿ אַסיסטאַטיוו טעקנאַלאַדזשיז דערווייַל מעלדן נישט דעם געצייַג אין דעם סיטואַציע. אַדדיטיאָנאַללי, טאָן ניט פאַרלאָזנ זיך בלויז hover
די צינגל פֿאַר דיין טאָאָלטיפּ, ווייַל דאָס וועט מאַכן דיין טאָאָלטיפּס אוממעגלעך צו צינגל פֿאַר קלאַוויאַטור יוזערז.
<!-- 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 צו קעבאַב-פאַל ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, אַנשטאָט פון ניצן data-bs-customClass="beautifier"
, נוצן data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, און
allowList
אָפּציעס קענען ניט זיין סאַפּלייד מיט דאַטן אַטריביוץ.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
animation |
בוליאַן | true |
צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָאָלטיפּ |
container |
שטריקל | עלעמענט | פאַלש | false |
אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענט. בייַשפּיל: |
delay |
נומער | כייפעץ | 0 |
פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז: |
html |
בוליאַן | false |
לאָזן HTML אין די טאָאָלטיפּ. אויב אמת, HTML טאַגס אין די טאָאָלטיפּ ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן. |
placement |
שטריקל | פֿונקציע | 'top' |
ווי צו שטעלע די מכשירים - אַוטאָ | שפּיץ | דנאָ | לינקס | רעכט. ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די טאָאָלטיפּ DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער |
selector |
שטריקל | פאַלש | false |
אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז אויך געניצט צו צולייגן מכשירים צו דינאַמיקאַללי צוגעגעבן DOM עלעמענטן ( jQuery.on שטיצן). זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל . |
template |
שטריקל | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
באַזע HTML צו נוצן ווען קריייטינג די טאָאָלטיפּ. די טאָאָלטיפּ
די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די |
title |
שטריקל | עלעמענט | פֿונקציע | '' |
פעליקייַט טיטל ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
trigger |
שטריקל | 'hover focus' |
ווי מכשיר עצה איז טריגערד - גיט | האָווער | פאָקוס | מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ.
|
fallbackPlacements |
מענגע | ['top', 'right', 'bottom', 'left'] |
דעפינירן פאַלבאַקק פּלייסמאַנץ דורך פּראַוויידינג אַ רשימה פון פּלייסמאַנץ אין מענגע (אין סדר פון ייבערהאַנט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס נאַטור דאָקס |
boundary |
שטריקל | עלעמענט | 'clippingParents' |
אָווערפלאָוו קאַנסטריינץ גרענעץ פון די טאָאָלטיפּ (אַפּלייז בלויז צו פּאָפּער ס פּרעווענט אָווערפלאָוו מאָדיפיער). דורך פעליקייַט עס ס 'clippingParents' און קענען אָננעמען אַן HTMLElement דערמאָנען (בלויז דורך דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper's detectOverflow docs . |
customClass |
שטריקל | פֿונקציע | '' |
לייג קלאסן צו די מכשירים ווען עס איז געוויזן. באַמערקונג אַז די קלאסן וועט זיין צוגעגעבן אין אַדישאַן צו קיין קלאסן ספּעסיפיעד אין די מוסטער. צו לייגן קייפל קלאסן, באַזונדער זיי מיט ספּייסאַז: איר קענט אויך פאָרן אַ פֿונקציע וואָס זאָל צוריקקומען אַ איין שטריקל מיט נאָך קלאַס נעמען. |
sanitize |
בוליאַן | true |
געבן אָדער דיסייבאַל די סאַניטיזיישאַן. אויב אַקטיווייטיד 'template' און 'title' אָפּציעס וועט זיין סאַניטייזד. זען די סאַניטיזער אָפּטיילונג אין אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן . |
allowList |
כייפעץ | פעליקייַט ווערט | אָבדזשעקט וואָס כּולל ערלויבט אַטריביוץ און טאַגס |
sanitizeFn |
null | פֿונקציע | null |
דאָ איר קענען צושטעלן דיין אייגענע סאַניטיז פונקציע. דאָס קען זיין נוציק אויב איר בעסער וועלן צו נוצן אַ דעדאַקייטאַד ביבליאָטעק צו דורכפירן סאַניטיזיישאַן. |
offset |
מענגע | שטריקל | פֿונקציע | [0, 0] |
אָפסעט פון די טאָאָלטיפּ קאָרעוו צו זיין ציל. איר קענען פאָרן אַ שטריקל אין דאַטן אַטריביוץ מיט קאָמע אפגעשיידט וואַלועס ווי: ווען אַ פֿונקציע איז גענוצט צו באַשטימען דעם פאָטאָ, עס איז גערופן מיט אַ כייפעץ מיט די פּאָפּער פּלייסמאַנט, די רעפֿערענץ, און פּאָפּער רעקץ ווי זייַן ערשטער אַרגומענט. די טריגערינג עלעמענט DOM נאָדע איז דורכגעגאנגען ווי די רגע אַרגומענט. די פֿונקציע מוזן צוריקקומען אַ מענגע מיט צוויי נומערן: . פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס פאָטאָ דאָקומענטן . |
popperConfig |
null | כייפעץ | פֿונקציע | null |
צו טוישן באָאָטסטראַפּ ס פעליקייַט פּאָפּער קאַנפיגיעריישאַן, זען פּאָפּער ס קאַנפיגיעריישאַן . ווען אַ פֿונקציע איז גענוצט צו שאַפֿן די פּאָפּער קאַנפיגיעריישאַן, עס איז גערופן מיט אַ כייפעץ וואָס כּולל די באָאָטסטראַפּ ס פעליקייַט פּאָפּער קאַנפיגיעריישאַן. עס העלפּס איר נוצן און צונויפגיסן די פעליקייַט מיט דיין אייגענע קאַנפיגיעריישאַן. די פֿונקציע מוזן צוריקקומען אַ קאַנפיגיעריישאַן כייפעץ פֿאַר פּאָפּער. |
דאַטן אַטריביוץ פֿאַר יחיד מכשירים
אָפּציעס פֿאַר יחיד מכשירים קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.
ניצן פונקציע מיט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
סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די טאָאָלטיפּ בייַשפּיל פֿאַרבונדן מיט אַ DOM עלעמענט, אָדער שאַפֿן אַ נייַע אין פאַל עס איז נישט יניטיאַלייזד
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
געשעענישן
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.tooltip |
דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
shown.bs.tooltip |
This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.tooltip |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.tooltip |
This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.bs.tooltip |
This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()