מכשירים
דאַקיומענטיישאַן און ביישפילן פֿאַר אַדינג מנהג באָאָטסטראַפּ מכשירים מיט CSS און דזשאַוואַסקריפּט ניצן CSS3 פֿאַר אַנאַמיישאַנז און דאַטן אַטריביוץ פֿאַר היגע טיטל סטאָרידזש.
איבערבליק
טינגז צו וויסן ווען ניצן די Tooltip פּלוגין:
- טאָאָלטיפּס פאַרלאָזנ זיך די 3rd פּאַרטיי ביבליאָטעק פּאָפּער פֿאַר פּאַזישאַנינג. איר מוזן אַרייַננעמען popper.min.js איידער bootstrap.js אָדער נוצן
bootstrap.bundle.min.js
/bootstrap.bundle.js
וואָס כּולל פּאָפּער אין סדר פֿאַר די מכשירים צו אַרבעטן! - אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערז
util.js
. - טאָאָלטיפּס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
- מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.
- ספּעציפיצירן
container: 'body'
צו ויסמיידן רענדערינג פּראָבלעמס אין מער קאָמפּליצירט קאַמפּאָונאַנץ (ווי אונדזער אַרייַנשרייַב גרופּעס, קנעפּל גרופּעס, עטק). - טריגערינג מכשירים אויף פאַרבאָרגן עלעמענטן וועט נישט אַרבעטן.
- מכשירים פֿאַר
.disabled
אָדערdisabled
עלעמענטן מוזן זיין טריגערד אויף אַ ראַפּער עלעמענט. - ווען טריגערד פֿון כייפּערלינגקס וואָס שפּאַן קייפל שורות, טאָאָלטיפּס וועט זיין סענטערד. ניצן
white-space: nowrap;
אויף דיין<a>
s צו ויסמיידן דעם נאַטור. - מכשירים מוזן זיין פאַרבאָרגן איידער זייער קאָראַספּאַנדינג עלעמענטן זענען אַוועקגענומען פון די DOM.
- טאָאָלטיפּס קענען זיין טריגערד דאַנק צו אַן עלעמענט אין אַ שאָטן DOM.
prefers-reduced-motion
מידיאַ אָנפֿרעג. זען די
רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .
האָט דאָס אַלץ? גרויס, לאָזן אונדז זען ווי זיי אַרבעטן מיט עטלעכע ביישפילן.
בייַשפּיל: געבן מכשירים אומעטום
איין וועג צו ינישאַלייז אַלע מכשירים אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggle
אַטריביוט:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
ביישפילן
האָווער אויף די לינקס אונטן צו זען מכשירים:
אָרטהאָלדער טעקסט צו באַווייַזן עטלעכע ינלינע פֿאַרבינדונגען מיט מכשירים. דאָס איז איצט בלויז פיללער, קיין רעצייעך. אינהאַלט געשטעלט דאָ נאָר צו נאָכקרימען דעם בייַזייַן פון פאַקטיש טעקסט . און אַלע דעם נאָר צו געבן איר אַ געדאַנק פון ווי מכשירים וואָלט קוקן ווען געוויינט אין פאַקטיש סיטואַטיאָנס. אַזוי, אַלעווייַ איר האָט איצט געזען ווי די מכשירים אויף לינקס קענען אַרבעטן אין פיר, אַמאָל איר נוצן זיי אויף דיין אייגענע פּלאַץ אָדער פּרויעקט.
האָווער איבער די קנעפּלעך אונטן צו זען די פיר מכשירים: שפּיץ, רעכט, דנאָ און לינקס.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
און מיט מנהג HTML צוגעגעבן:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
באַניץ
די טאָאָלטיפּ פּלוגין דזשענערייץ אינהאַלט און מאַרקאַפּ אויף מאָנען, און דורך פעליקייַט לייגט מכשירים נאָך זייער צינגל עלעמענט.
צינגל די טאָאָלטיפּ דורך דזשאַוואַסקריפּט:
$('#example').tooltip(options)
איבערפלוס auto
אוןscroll
Tooltip שטעלע פרוווט צו אויטאָמאַטיש טוישן ווען אַ פאָטער קאַנטיינער האט overflow: auto
אָדער overflow: scroll
ווי אונדזער .table-responsive
, אָבער נאָך האלט די פּאַזישאַנינג פון דער אָריגינעל פּלייסמאַנט. צו באַשליסן, שטעלן די boundary
אָפּציע צו עפּעס אַנדערש ווי פעליקייַט ווערט, 'scrollParent'
, אַזאַ ווי 'window'
:
$('#example').tooltip({ boundary: 'window' })
מאַרקאַפּ
די פארלאנגט מאַרקאַפּ פֿאַר אַ טאָאָלטיפּ איז בלויז אַ data
אַטריביוט און title
אויף די HTML עלעמענט איר ווילט האָבן אַ טאָאָלטיפּ. די דזשענערייטאַד מאַרקאַפּ פון אַ טאָאָלטיפּ איז גאַנץ פּשוט, כאָטש עס דאַרף אַ שטעלע (דורך פעליקייַט, באַשטימט top
דורך די פּלוגין).
מאכן מכשירים אַרבעט פֿאַר קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס
איר זאָל נאָר לייגן מכשירים צו HTML עלעמענטן וואָס זענען טראַדישאַנאַלי פאָוקיסט אויף קלאַוויאַטור און ינטעראַקטיוו (אַזאַ ווי לינקס אָדער פאָרעם קאָנטראָלס). כאָטש אַרביטראַריש HTML עלעמענטן (אַזאַ ווי <span>
s) קענען זיין פאָוקיסטאַבאַל דורך אַדינג די tabindex="0"
אַטריביוט, דאָס וועט לייגן פּאַטענטשאַלי אַנויינג און קאַנפיוזינג קוויטל סטאַפּס אויף ניט-ינטעראַקטיוו עלעמענטן פֿאַר קלאַוויאַטור יוזערז, און רובֿ אַסיסטאַטיוו טעקנאַלאַדזשיז דערווייַל מעלדן נישט דעם טאָאָלטיפּ אין דעם סיטואַציע. אַדדיטיאָנאַללי, טאָן ניט פאַרלאָזנ זיך בלויז hover
ווי די צינגל פֿאַר דיין טאָאָלטיפּ, ווייַל דאָס וועט מאַכן דיין טאָאָלטיפּס אוממעגלעך צו צינגל פֿאַר קלאַוויאַטור יוזערז.
<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
פאַרקריפּלט עלעמענטן
עלעמענטן מיט דעם disabled
אַטריביוט זענען נישט ינטעראַקטיוו, טייַטש די ניצערס קענען נישט פאָקוס, האָווער אָדער גיט זיי צו צינגל אַ טאָאָלטיפּ (אָדער פּאָפּאָווער). ווי אַ וואָרקאַראָונד, איר וועט וועלן צו צינגל די טאָאָלטיפּ פון אַ ראַפּער <div>
אָדער <span>
, יידילי געמאכט קלאַוויאַטור-פאָוקאָוסאַבאַל ניצן tabindex="0"
, און אָווועררייד pointer-events
די פאַרקריפּלט עלעמענט.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
אָפּציעס
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-animation=""
.
sanitize
,
sanitizeFn
און
whiteList
אָפּציעס קענען ניט זיין סאַפּלייד מיט דאַטן אַטריביוץ.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אַנאַמיישאַן | בוליאַן | אמת | צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָאָלטיפּ |
קאנטעינער | שטריקל | עלעמענט | פאַלש | פאַלש | אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענט. בייַשפּיל: |
פאַרהאַלטן | נומער | כייפעץ | 0 | פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן כייפעץ סטרוקטור איז: |
HTML | בוליאַן | פאַלש | לאָזן HTML אין די טאָאָלטיפּ. אויב אמת, HTML טאַגס אין די טאָאָלטיפּ ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן. |
פּלייסמאַנט | שטריקל | פֿונקציע | 'אויבן' | ווי צו שטעלע די מכשירים - אַוטאָ | שפּיץ | דנאָ | לינקס | רעכט. ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די טאָאָלטיפּ DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער |
סעלעקטאָר | שטריקל | פאַלש | פאַלש | אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז אויך געניצט צו צולייגן מכשירים צו דינאַמיקאַללי צוגעגעבן DOM עלעמענטן ( jQuery.on שטיצן). זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל . |
מוסטער | שטריקל | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
באַזע HTML צו נוצן ווען קריייטינג די טאָאָלטיפּ. די טאָאָלטיפּ
די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די |
טיטל | שטריקל | עלעמענט | פֿונקציע | '' | פעליקייַט טיטל ווערט אויב אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין |
צינגל | שטריקל | 'האָווער פאָקוס' | ווי מכשיר עצה איז טריגערד - גיט | האָווער | פאָקוס | מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ.
|
אָפסעט | נומער | שטריקל | פֿונקציע | 0 | אָפסעט פון די טאָאָלטיפּ קאָרעוו צו זיין ציל. ווען אַ פֿונקציע איז גענוצט צו באַשטימען דעם פאָטאָ, עס איז גערופן מיט אַ כייפעץ מיט די פאָטאָ דאַטן ווי זייַן ערשטער אַרגומענט. די פֿונקציע מוזן צוריקקומען אַ כייפעץ מיט דער זעלביקער סטרוקטור. די טריגערינג עלעמענט DOM נאָדע איז דורכגעגאנגען ווי די רגע אַרגומענט. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס פאָטאָ דאָקומענטן . |
פאַלבאַקקפּלייסמאַנט | שטריקל | מענגע | 'פליפּן' | לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס נאַטור דאָקס |
customClass | שטריקל | פֿונקציע | '' | לייג קלאסן צו די מכשירים ווען עס איז געוויזן. באַמערקונג אַז די קלאסן וועט זיין צוגעגעבן אין אַדישאַן צו קיין קלאסן ספּעסיפיעד אין די מוסטער. צו לייגן קייפל קלאסן, באַזונדער זיי מיט ספּייסאַז: איר קענט אויך פאָרן אַ פֿונקציע וואָס זאָל צוריקקומען אַ איין שטריקל מיט נאָך קלאַס נעמען. |
גרענעץ | שטריקל | עלעמענט | 'סקראָלפּאַרענט' | אָוווערפלאָו קאַנסטריינץ גרענעץ פון די טאָאָלטיפּ. אַקסעפּץ די וואַלועס פון 'viewport' , 'window' , 'scrollParent' , אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע, אָפּשיקן צו Popper's preventOverflow docs . |
סאַניטיזירן | בוליאַן | אמת | געבן אָדער דיסייבאַל די סאַניטיזיישאַן. אויב אַקטיווייטיד 'template' און 'title' אָפּציעס וועט זיין סאַניטייזד. זען די סאַניטיזער אָפּטיילונג אין אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן . |
ווייַס רשימה | כייפעץ | פעליקייַט ווערט | אָבדזשעקט וואָס כּולל ערלויבט אַטריביוץ און טאַגס |
sanitizeFn | null | פֿונקציע | null | דאָ איר קענען צושטעלן דיין אייגענע סאַניטיז פונקציע. דאָס קען זיין נוציק אויב איר בעסער וועלן צו נוצן אַ דעדאַקייטאַד ביבליאָטעק צו דורכפירן סאַניטיזיישאַן. |
popperConfig | null | כייפעץ | null | צו טוישן די פעליקייַט פּאָפּער קאַנפיגיעריישאַן פון Bootstrap, זען פּאָפּער ס קאַנפיגיעריישאַן |
דאַטן אַטריביוץ פֿאַר יחיד מכשירים
אָפּציעס פֿאַר יחיד מכשירים קענען אַלטערנאַטיוועלי זיין ספּעסיפיעד דורך די נוצן פון דאַטן אַטריביוץ, ווי דערקלערט אויבן.
מעטהאָדס
אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז
אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .
זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .
$().tooltip(options)
אַטאַטשיז אַ טאָאָלטיפּ האַנדלער צו אַן עלעמענט זאַמלונג.
.tooltip('show')
ריווילז אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים. מכשירים מיט נול-לענג טיטלען זענען קיינמאָל געוויזן.
$('#element').tooltip('show')
.tooltip('hide')
באַהאַלט אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי פאַרבאָרגן (ד"ה איידער די hidden.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים.
$('#element').tooltip('hide')
.tooltip('toggle')
טאָגלעס אַן עלעמענט ס מכשירים. קערט צו די קאַללער איידער די טאָאָלטיפּ איז אַקטשאַוואַלי געוויזן אָדער פאַרבאָרגן (ד"ה איידער די shown.bs.tooltip
אָדער hidden.bs.tooltip
געשעעניש אַקערז). דאָס איז גערעכנט ווי אַ "מאַנואַל" טריגערינג פון די מכשירים.
$('#element').tooltip('toggle')
.tooltip('dispose')
באַהאַלטן און דיסטרויז אַן עלעמענט ס מכשירים. מכשירים וואָס נוצן דעלאַגיישאַן (וואָס זענען באשאפן מיט די selector
אָפּציע ) קענען ניט זיין ינדיווידזשואַלי חרובֿ אויף אָפּשטאַמלינג צינגל עלעמענטן.
$('#element').tooltip('dispose')
.tooltip('enable')
גיט אַן עלעמענט ס געצייַג די פיייקייט צו זיין געוויזן. מכשירים זענען ענייבאַלד דורך פעליקייַט.
$('#element').tooltip('enable')
.tooltip('disable')
רימוווז די פיייקייט צו ווייַזן אַן עלעמענט ס מכשירים. די טאָאָלטיפּ וועט זיין געוויזן בלויז אויב עס איז שייַעך-ענייבאַלד.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
טאָגלעס די פיייקייט פֿאַר אַן עלעמענט ס מכשירים צו זיין געוויזן אָדער פאַרבאָרגן.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
דערהייַנטיקונגען די שטעלע פון אַן עלעמענט ס טאָאָלטיפּ.
$('#element').tooltip('update')
געשעענישן
געשעעניש טיפּ | באַשרייַבונג |
---|---|
show.bs.tooltip | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.מכשיר עצה | דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
hide.bs.tooltip | דעם געשעעניש איז פייערד מיד ווען דער hide בייַשפּיל אופֿן איז גערופן. |
hidden.bs.tooltip | דער געשעעניש איז פייערד ווען די טאָאָלטיפּ איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |
inserted.bs.tooltip | דער געשעעניש איז פייערד נאָך די show.bs.tooltip געשעעניש ווען די טאָאָלטיפּ מוסטער איז צוגעגעבן צו די DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})