in English

מכשירים

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

אַפּפּענדז די מכשירים צו אַ ספּעציפיש עלעמענט. בייַשפּיל: container: 'body'. דער אָפּציע איז דער הויפּט נוציק ווייַל עס אַלאַוז איר צו שטעלן די טאָאָלטיפּ אין די לויפן פון דעם דאָקומענט לעבן די טריגערינג עלעמענט - וואָס וועט פאַרמיידן די טאָאָלטיפּ פון פלאָוטינג אַוועק פון די טריגערינג עלעמענט בעשאַס אַ פֿענצטער גרייס.

פאַרהאַלטן נומער | כייפעץ 0

פאַרהאַלטן ווייַזונג און כיידינג די טאָאָלטיפּ (מס) - איז נישט אַפּלייז צו מאַנואַל צינגל טיפּ

אויב אַ נומער איז סאַפּלייד, פאַרהאַלטן איז געווענדט צו ביידע באַהאַלטן / ווייַזן

כייפעץ סטרוקטור איז:delay: { "show": 500, "hide": 100 }

HTML בוליאַן פאַלש

לאָזן HTML אין די טאָאָלטיפּ.

אויב אמת, HTML טאַגס אין די טאָאָלטיפּ titleוועט זיין רענדערד אין די טאָאָלטיפּ. אויב פאַלש, jQuery ס textאופֿן וועט זיין געניצט צו אַרייַנלייגן אינהאַלט אין די DOM.

ניצן טעקסט אויב איר זענט באַזאָרגט וועגן XSS אנפאלן.

פּלייסמאַנט שטריקל | פֿונקציע 'אויבן'

ווי צו שטעלע די מכשירים - אַוטאָ | שפּיץ | דנאָ | לינקס | רעכט.
ווען autoעס איז ספּעסיפיעד, עס וועט דינאַמיקאַללי ריאָריענט די טאָאָלטיפּ.

ווען אַ פֿונקציע איז גענוצט צו באַשטימען די פּלייסמאַנט, עס איז גערופן מיט די טאָאָלטיפּ DOM נאָדע ווי זיין ערשטער אַרגומענט און די טריגערינג עלעמענט DOM נאָדע ווי זיין רגע. דער thisקאָנטעקסט איז באַשטימט צו די טאָאָלטיפּ בייַשפּיל.

סעלעקטאָר שטריקל | פאַלש פאַלש אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז אויך געניצט צו צולייגן מכשירים צו דינאַמיקאַללי צוגעגעבן DOM עלעמענטן ( jQuery.onשטיצן). זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל .
מוסטער שטריקל '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

באַזע HTML צו נוצן ווען קריייטינג די טאָאָלטיפּ.

די טאָאָלטיפּ titleוועט זיין ינדזשעקטיד אין די .tooltip-inner.

.arrowוועט ווערן דער פייַל פון די מכשירים.

די ויסווייניקסט ראַפּער עלעמענט זאָל האָבן די .tooltipקלאַס און role="tooltip".

טיטל שטריקל | עלעמענט | פֿונקציע ''

פעליקייַט טיטל ווערט אויב titleאַטריביוט איז נישט פאָרשטעלן.

אויב אַ פֿונקציע איז געגעבן, עס וועט זיין גערופֿן מיט זיין thisרעפֿערענץ שטעלן צו די עלעמענט וואָס די טאָאָלטיפּ איז אַטאַטשט צו.

צינגל שטריקל 'האָווער פאָקוס'

ווי מכשיר עצה איז טריגערד - גיט | האָווער | פאָקוס | מאַנואַל. איר קען פאָרן קייפל טריגערז; צעטיילן זיי מיט אַ פּלאַץ.

'manual'ינדיקייץ אַז די טאָאָלטיפּ וועט זיין טריגערד פּראָגראַממאַטיק דורך די .tooltip('show'), .tooltip('hide')און .tooltip('toggle')מעטהאָדס; דעם ווערט קענען ניט זיין קאַמביינד מיט קיין אנדערע צינגל.

'hover'אויף זיין אייגן וועט רעזולטאַט אין מכשירים וואָס קענען ניט זיין טריגערד דורך די קלאַוויאַטור, און זאָל נאָר זיין געוויינט אויב אָלטערנאַטיוו מעטהאָדס פֿאַר קאַנווייינג די זעלבע אינפֿאָרמאַציע פֿאַר קלאַוויאַטור יוזערז זענען פאָרשטעלן.

אָפסעט נומער | שטריקל | פֿונקציע 0

אָפסעט פון די טאָאָלטיפּ קאָרעוו צו זיין ציל.

ווען אַ פֿונקציע איז גענוצט צו באַשטימען דעם פאָטאָ, עס איז גערופן מיט אַ כייפעץ מיט די פאָטאָ דאַטן ווי זייַן ערשטער אַרגומענט. די פֿונקציע מוזן צוריקקומען אַ כייפעץ מיט דער זעלביקער סטרוקטור. די טריגערינג עלעמענט DOM נאָדע איז דורכגעגאנגען ווי די רגע אַרגומענט.

פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס פאָטאָ דאָקומענטן .

פאַלבאַקקפּלייסמאַנט שטריקל | מענגע 'פליפּן' לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס נאַטור דאָקס
customClass שטריקל | פֿונקציע ''

לייג קלאסן צו די מכשירים ווען עס איז געוויזן. באַמערקונג אַז די קלאסן וועט זיין צוגעגעבן אין אַדישאַן צו קיין קלאסן ספּעסיפיעד אין די מוסטער. צו לייגן קייפל קלאסן, באַזונדער זיי מיט ספּייסאַז: 'a b'.

איר קענט אויך פאָרן אַ פֿונקציע וואָס זאָל צוריקקומען אַ איין שטריקל מיט נאָך קלאַס נעמען.

גרענעץ שטריקל | עלעמענט 'סקראָלפּאַרענט' אָוווערפלאָו קאַנסטריינץ גרענעץ פון די טאָאָלטיפּ. אַקסעפּץ די וואַלועס פון '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...
})