Source

Գործիքների հուշումներ

Փաստաթղթեր և օրինակներ՝ CSS-ով և JavaScript-ով հատուկ Bootstrap-ի գործիքների հուշումներ ավելացնելու համար՝ օգտագործելով CSS3 անիմացիաների և տվյալների ատրիբուտների՝ տեղական անվանումների պահպանման համար:

Ընդհանուր ակնարկ

Գործիքների հուշում հավելվածն օգտագործելիս պետք է իմանալ.

  • Գործիքների հուշումները հիմնվում են 3-րդ կողմի Popper.js գրադարանի վրա ՝ դիրքորոշման համար: Դուք պետք է ներառեք popper.min.js-ը bootstrap.js-ից առաջ կամ օգտագործեք bootstrap.bundle.min.js/ bootstrap.bundle.jsորը պարունակում է Popper.js, որպեսզի գործիքի հուշումները աշխատեն:
  • Եթե ​​դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :
  • Գործիքների հուշումները միացված են կատարողականի նկատառումներով, այնպես որ դուք պետք է դրանք սկզբնավորեք ինքներդ :
  • Գործիքների հուշումները զրոյական երկարությամբ վերնագրերով երբեք չեն ցուցադրվում:
  • Նշեք container: 'body'՝ ավելի բարդ բաղադրիչներում խնդիրներ չարտադրելու համար (օրինակ՝ մեր մուտքային խմբերը, կոճակների խմբերը և այլն):
  • Թաքնված տարրերի վրա գործիքների հուշումները գործարկելը չի ​​աշխատի:
  • Գործիքների հուշումները .disabledկամ disabledտարրերը պետք է գործարկվեն փաթաթող տարրի վրա:
  • Երբ գործարկվում են մի քանի տողեր ընդգրկող հիպերհղումներից, գործիքի հուշումները կենտրոնացված կլինեն: Օգտագործեք white-space: nowrap;ձեր <a>s-ի վրա՝ այս պահվածքից խուսափելու համար:
  • Գործիքների հուշումները պետք է թաքցվեն նախքան դրանց համապատասխան տարրերը DOM-ից հեռացնելը:
  • Գործիքների հուշումները կարող են գործարկվել ստվերային DOM-ի ներսում գտնվող տարրի շնորհիվ:

Այս բաղադրիչի անիմացիոն էֆեկտը կախված է prefers-reduced-motionլրատվամիջոցների հարցումից: Տեսեք մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :

Ստացե՞լ եք այդ ամենը: Հիանալի, եկեք տեսնենք, թե ինչպես են նրանք աշխատում որոշ օրինակներով:

Օրինակ. Միացնել գործիքի հուշումները ամենուր

Էջի բոլոր գործիքների հուշումները սկզբնավորելու եղանակներից մեկը կլինի դրանք ընտրելն իրենց data-toggleհատկանիշով.

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

Օրինակներ

Գործիքների հուշումները տեսնելու համար սավառնեք ստորև նշված հղումների վրա.

Նիհար տաբատ հաջորդ մակարդակի keffiyeh դուք հավանաբար չեք լսել նրանց մասին: Ֆոտո խցիկ մորուք հում ջինսե տառատեսակ Vegan Messenger պայուսակ stumptown. Ֆերմայից սեղան սեյթան, Mcsweeney's fixie-ի կայուն քինոա 8-բիթանոց ամերիկյան հագուստն ունի Թերի Ռիչարդսոնի վինիլային շամպրե: Մորուքի ստամպթաուն, կարդիգաններ բանհ մի լոմո ամպրոպ. Tofu բիոդիզել Ուիլյամսբուրգ Մարֆա, չորս Loko Mcsweeney's cleanse vegan chambray. Իսկապես հեգնական արհեստավոր , ինչ էլ որ լինի keytar-ը, սկեսնթեր ֆերմայից-սեղան Banksy Austin twitter handle freegan cred raw denim single-origin սուրճ վիրուսային:

Սավառնեք ներքևում գտնվող կոճակների վրա, որպեսզի տեսնեք գործիքի չորս ուղղությունները՝ վերև, աջ, ներքև և ձախ:

<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>

Օգտագործումը

Tooltip plugin-ը ստեղծում է բովանդակություն և նշում ըստ պահանջի, և լռելյայն տեղադրում է գործիքի հուշումները դրանց գործարկիչի տարրից հետո:

Գործարկեք գործիքի հուշումը JavaScript-ի միջոցով.

$('#example').tooltip(options)
վարարել autoուscroll

Գործիքների հուշման դիրքը փորձում է ավտոմատ կերպով փոխվել, երբ մայր կոնտեյները ունի 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ինտերակտիվ չեն, ինչը նշանակում է, որ օգտատերերը չեն կարող կենտրոնանալ, սավառնել կամ սեղմել դրանց վրա՝ գործիքի հուշում (կամ popover) գործարկելու համար: Որպես լուծում, դուք պետք է գործարկեք գործիքի հուշումը փաթաթիչից <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>

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Նկատի ունեցեք, որ անվտանգության նկատառումներից ելնելով sanitize, sanitizeFnև whiteListտարբերակները չեն կարող տրամադրվել տվյալների ատրիբուտների միջոցով:

Անուն Տիպ Կանխադրված Նկարագրություն
անիմացիա բուլյան ճիշտ Կիրառեք CSS fade անցում դեպի գործիքի հուշում
կոնտեյներ լարային | տարր | կեղծ կեղծ

Կցում է գործիքի հուշումը կոնկրետ տարրին: Օրինակ՝ container: 'body'. Այս տարբերակը հատկապես օգտակար է նրանով, որ թույլ է տալիս գործիքի հուշումը տեղադրել փաստաթղթի հոսքի մեջ՝ գործարկող տարրի մոտ, ինչը թույլ չի տա գործիքի հուշումը հեռանալ գործարկող տարրից պատուհանի չափսերի փոփոխման ժամանակ:
ուշացում համարը | օբյեկտ 0

Գործիքների հուշումը (ms) ցուցադրելու և թաքցնելու ուշացում - չի կիրառվում ձեռքով ձգանման տեսակի համար

Եթե ​​համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել

Օբյեկտի կառուցվածքը հետևյալն է.delay: { "show": 500, "hide": 100 }
html բուլյան կեղծ

Թույլատրել HTML-ը գործիքի հուշում:

Եթե ​​ճիշտ է, գործիքի հուշման մեջ HTML պիտակները կարտացոլվեն titleգործիքի հուշում: Եթե ​​կեղծ է, jQuery-ի textմեթոդը կօգտագործվի DOM-ում բովանդակություն մտցնելու համար:

Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները:
տեղաբաշխում լարային | ֆունկցիան 'գագաթ'

Ինչպես տեղադրել գործիքի հուշումը - auto | վերև | ստորին | ձախ | ճիշտ.
Երբ 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 հանգույցը փոխանցվում է որպես երկրորդ արգումենտ:

Լրացուցիչ տեղեկությունների համար տես Popper.js-ի օֆսեթ փաստաթղթերը :
հետադարձ Տեղադրում լարային | զանգված «շրջել» Թույլ տվեք նշել, թե որ դիրքը կօգտագործի Popper-ը հետադարձի ժամանակ: Լրացուցիչ տեղեկությունների համար տես Popper.js-ի վարքագծի փաստաթղթերը
սահման լարային | տարր «scrollParent» Գործիքի ծայրի արտահոսքի սահմանափակման սահմանը: Ընդունում է 'viewport', 'window', 'scrollParent', կամ HTMLElement հղումի արժեքները (միայն JavaScript): Լրացուցիչ տեղեկությունների համար տես Popper.js-ի preventOverflow փաստաթղթերը :
ախտահանել բուլյան ճիշտ Միացնել կամ անջատել ախտահանումը: Եթե ​​ակտիվացվի 'template', և 'title'ընտրանքները ախտահանվեն:
սպիտակ ցուցակ օբյեկտ Կանխադրված արժեք Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ
sanitizeFn զրոյական | ֆունկցիան դատարկ Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար:
popperConfig զրոյական | օբյեկտ դատարկ Bootstrap-ի լռելյայն Popper.js կոնֆիգուրացիան փոխելու համար տե՛ս Popper.js-ի կոնֆիգուրացիան

Տվյալների ատրիբուտները առանձին գործիքների հուշումների համար

Գործիքների առանձին հուշումների տարբերակները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով, ինչպես բացատրվեց վերևում:

Մեթոդներ

Ասինխրոն մեթոդներ և անցումներ

Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :

Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :

$().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կանչվում է օրինակի մեթոդը:
ցուցադրված.bs.tooltip Այս իրադարձությունը գործարկվում է, երբ գործիքի հուշումը տեսանելի է դառնում օգտատիրոջը (կսպասի CSS անցումների ավարտին):
hide.bs.tooltip Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideկանչվում է օրինակի մեթոդը:
hidden.bs.tooltip Այս իրադարձությունը գործարկվում է, երբ գործիքի հուշումն ավարտվի օգտագործողից թաքցնելու համար (կսպասի CSS-ի անցումների ավարտին):
տեղադրված.bs.tooltip Այս իրադարձությունը գործարկվում է այն show.bs.tooltipիրադարձությունից հետո, երբ գործիքի հուշման ձևանմուշը ավելացվի DOM-ում: 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})