Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

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

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

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

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

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

Օրինակներ

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

Տեղապահի տեքստ՝ գործիքի հուշումներով որոշ ներկառուցված հղումներ ցուցադրելու համար: Սա հիմա պարզապես լցոնիչ է, մարդասպան չկա: Այստեղ տեղադրված բովանդակությունը պարզապես իրական տեքստի ներկայությունը ընդօրինակելու համար : Եվ այդ ամենը պարզապես ձեզ պատկերացնելու համար, թե ինչպիսի տեսք կունենան գործիքների հուշումները, երբ դրանք օգտագործվեն իրական իրավիճակներում: Այսպիսով, հուսով ենք, որ դուք այժմ տեսել եք, թե ինչպես կարող են գործնականում աշխատել հղումների վերաբերյալ այս հուշումները , երբ դրանք օգտագործեք ձեր սեփական կայքում կամ նախագծում:

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

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

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

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Հեղեղել autoևscroll

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-bs-, ինչպես data-bs-animation="". Համոզվեք, որ փոխել եք ընտրանքի անվանման պատյանների տեսակը camelCase-ից դեպի kebab-case՝ ընտրանքները տվյալների ատրիբուտների միջոցով փոխանցելիս: Օրինակ՝ օգտագործելու փոխարեն data-bs-customClass="beautifier"օգտագործեք data-bs-custom-class="beautifier".

Նկատի ունեցեք, որ անվտանգության նկատառումներից ելնելով sanitize, sanitizeFn, և allowListտարբերակները չեն կարող տրամադրվել տվյալների ատրիբուտների միջոցով:
Անուն Տիպ Կանխադրված Նկարագրություն
animation բուլյան true Կիրառեք CSS fade անցում դեպի գործիքի հուշում
container լարային | տարր | կեղծ false

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

delay համարը | օբյեկտ 0

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

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

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

html բուլյան false

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

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

Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները:

placement լարային | ֆունկցիան 'top'

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

Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է գործիքի հուշումով DOM հանգույցը որպես առաջին արգումենտ և գործարկող տարրը՝ DOM հանգույցը որպես երկրորդ: Համատեքստը thisդրված է գործիքի հուշման օրինակին:

selector լարային | կեղծ false Եթե ​​ընտրիչ է տրամադրվում, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին: Գործնականում սա օգտագործվում է նաև դինամիկորեն ավելացված DOM տարրերի համար գործիքների հուշումներ կիրառելու համար ( jQuery.onաջակցություն): Տեսեք սա և տեղեկատվական օրինակ :
template լար '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Հիմք HTML-ը, որը պետք է օգտագործվի գործիքի հուշում ստեղծելիս:

Գործիքների հուշումները titleներարկվելու են .tooltip-inner.

.tooltip-arrowկդառնա գործիքի հուշման սլաքը:

Ամենաարտաքին փաթաթման տարրը պետք է ունենա .tooltipդաս և role="tooltip".

title լարային | տարր | ֆունկցիան ''

Վերնագրի կանխադրված արժեքը, եթե titleհատկանիշը չկա:

Եթե ​​տրված է ֆունկցիա, այն կկանչվի իր thisհղումների հավաքածուով այն տարրին, որին կցված է գործիքի հուշումը:

trigger լար 'hover focus'

Ինչպես է գործարկվում գործիքի հուշումը - սեղմեք | սավառնել | կենտրոնացում | ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով:

'manual'ցույց է տալիս, որ գործիքի հուշումը կգործարկվի ծրագրային կերպով .show()և .hide()մեթոդների .toggle()միջոցով. այս արժեքը չի կարող համակցվել որևէ այլ ձգանի հետ:

'hover'ինքնուրույն կհանգեցնի գործիքների հուշումների, որոնք չեն կարող գործարկվել ստեղնաշարի միջոցով և պետք է օգտագործվեն միայն այն դեպքում, եթե առկա են ստեղնաշարից օգտվողների համար նույն տեղեկատվությունը փոխանցելու այլընտրանքային մեթոդներ:

fallbackPlacements զանգված ['top', 'right', 'bottom', 'left'] Սահմանեք հետադարձ տեղադրությունները՝ տրամադրելով զանգվածում տեղաբաշխումների ցանկը (նախապատվության կարգով): Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը
boundary լարային | տարր 'clippingParents' Գործիքների հուշման սահմանափակման սահմանը (կիրառվում է միայն Popper-ի preventOverflow փոփոխիչի համար): Լռելյայն այն է 'clippingParents'և կարող է ընդունել HTMLElement հղում (միայն JavaScript-ի միջոցով): Լրացուցիչ տեղեկությունների համար տես Popper's detectOverflow փաստաթղթերը :
customClass լարային | ֆունկցիան ''

Ավելացրեք դասեր գործիքի հուշում, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ 'class-1 class-2'.

Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ:

sanitize բուլյան true Միացնել կամ անջատել ախտահանումը: Եթե ​​ակտիվացվի 'template', և 'title'ընտրանքները ախտահանվեն: Տեսեք ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում :
allowList օբյեկտ Կանխադրված արժեք Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ
sanitizeFn զրոյական | ֆունկցիան null Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար:
offset զանգված | լարային | ֆունկցիան [0, 0]

Գործիքների հուշման փոխհատուցում իր թիրախի համեմատ: Դուք կարող եք տող փոխանցել տվյալների ատրիբուտներում ստորակետերով առանձնացված արժեքներով, ինչպիսիք են.data-bs-offset="10,20"

Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես իր առաջին արգումենտ պարունակող popper-ի տեղադրումը, հղումը և popper-ի ուղղումները: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Ֆունկցիան պետք է վերադարձնի երկու թվերով զանգված՝ .[skidding, distance]

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

popperConfig զրոյական | օբյեկտ | ֆունկցիան null

Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան :

Երբ ֆունկցիան օգտագործվում է Popper կոնֆիգուրացիան ստեղծելու համար, այն կանչվում է օբյեկտի հետ, որը պարունակում է Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան: Այն օգնում է ձեզ օգտագործել և միաձուլել կանխադրվածը ձեր սեփական կազմաձևի հետ: Ֆունկցիան պետք է վերադարձնի Popper-ի կազմաձևման օբյեկտ:

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

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

Օգտագործելով գործառույթըpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Մեթոդներ

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

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

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

ցուցադրում

Բացահայտում է տարրի գործիքի հուշումը: Վերադառնում է զանգահարողին՝ նախքան գործիքի հուշումը փաստացի ցուցադրելը (այսինքն՝ նախքան 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()

toggleՄիացված է

Անջատում է տարրի գործիքի հուշման ցուցադրման կամ թաքցման հնարավորությունը:

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 Այս իրադարձությունը գործարկվում է, երբ գործիքի հուշումը տեսանելի է դառնում օգտատիրոջը (կսպասի CSS անցումների ավարտին):
hide.bs.tooltip Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideկանչվում է օրինակի մեթոդը:
hidden.bs.tooltip Այս իրադարձությունը գործարկվում է, երբ գործիքի հուշումն ավարտվի օգտագործողից թաքցնելու համար (կսպասի CSS-ի անցումների ավարտին):
inserted.bs.tooltip Այս իրադարձությունը գործարկվում է այն show.bs.tooltipիրադարձությունից հետո, երբ գործիքի հուշման ձևանմուշը ավելացվի DOM-ում:
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()