Source

מכשירים

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

איבערבליק

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

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

האָט דאָס אַלץ? גרויס, לאָמיר זען ווי זיי אַרבעטן מיט עטלעכע ביישפילן.

בייַשפּיל: געבן מכשירים אומעטום

איין וועג צו ינישאַלייז אַלע מכשירים אויף אַ בלאַט איז צו סעלעקטירן זיי לויט זייער data-toggleאַטריביוט:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ביישפילן

האָווער אויף די לינקס אונטן צו זען מכשירים:

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

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

<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="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
אַנאַמיישאַן בוליאַן אמת צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָאָלטיפּ
קאנטעינער שטריקל | עלעמענט | פאַלש פאַלש

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

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

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

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

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

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

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

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

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

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

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

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

סעלעקטאָר שטריקל | פאַלש פאַלש אויב אַ סעלעקטאָר איז צוגעשטעלט, טאָאָלטיפּ אַבדזשעקץ וועט זיין דעלאַגייטאַד צו די ספּעסיפיעד טאַרגאַץ. אין פיר, דאָס איז געניצט צו געבן דינאַמיש HTML אינהאַלט צו לייגן פּאָפּאָווערס. זען דעם און אַ ינפאָרמאַטיוו בייַשפּיל .
מוסטער שטריקל '<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 אָפסעט פון די טאָאָלטיפּ קאָרעוו צו זיין ציל. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס פאָטאָ דאָקומענטן .
פאַלבאַקקפּלייסמאַנט שטריקל | מענגע 'פליפּן' לאָזן צו ספּעציפיצירן וואָס שטעלע פּאָפּער וועט נוצן אויף פאַלבאַק. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js ס נאַטור דאָקומענטן
גרענעץ שטריקל | עלעמענט 'סקראָלפּאַרענט' אָוווערפלאָו קאַנסטריינץ גרענעץ פון די טאָאָלטיפּ. אַקסעפּץ די וואַלועס פון 'viewport', 'window', 'scrollParent', אָדער אַן HTMLElement דערמאָנען (בלויז דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper.js's preventOverflow docs .

דאַטן אַטריביוץ פֿאַר יחיד מכשירים

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

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

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

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

$().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…
})