Գործիքների հուշումներ
Փաստաթղթեր և օրինակներ՝ 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-ի ներսում գտնվող տարրի շնորհիվ:
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 |
Կցում է գործիքի հուշումը կոնկրետ տարրին: Օրինակ՝ |
delay |
համարը | օբյեկտ | 0 |
Գործիքների հուշումը (ms) ցուցադրելու և թաքցնելու ուշացում - չի կիրառվում ձեռքով ձգանման տեսակի համար Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
html |
բուլյան | false |
Թույլատրել HTML-ը գործիքի հուշում: Եթե ճիշտ է, գործիքի հուշման մեջ HTML պիտակները կարտացոլվեն Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները: |
placement |
լարային | ֆունկցիան | 'top' |
Ինչպես տեղադրել գործիքի հուշումը - auto | վերև | ստորին | ձախ | ճիշտ. Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է գործիքի հուշումով DOM հանգույցը որպես առաջին արգումենտ և գործարկող տարրը՝ DOM հանգույցը որպես երկրորդ: Համատեքստը |
selector |
լարային | կեղծ | false |
Եթե ընտրիչ է տրամադրվում, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին: Գործնականում սա օգտագործվում է նաև դինամիկորեն ավելացված DOM տարրերի համար գործիքների հուշումներ կիրառելու համար ( jQuery.on աջակցություն): Տեսեք սա և տեղեկատվական օրինակ : |
template |
լար | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Հիմք HTML-ը, որը պետք է օգտագործվի գործիքի հուշում ստեղծելիս: Գործիքների հուշումները
Ամենաարտաքին փաթաթման տարրը պետք է ունենա |
title |
լարային | տարր | ֆունկցիան | '' |
Վերնագրի կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
trigger |
լար | 'hover focus' |
Ինչպես է գործարկվում գործիքի հուշումը - սեղմեք | սավառնել | կենտրոնացում | ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով:
|
fallbackPlacements |
զանգված | ['top', 'right', 'bottom', 'left'] |
Սահմանեք հետադարձ տեղադրությունները՝ տրամադրելով զանգվածում տեղաբաշխումների ցանկը (նախապատվության կարգով): Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը |
boundary |
լարային | տարր | 'clippingParents' |
Գործիքների հուշման սահմանափակման սահմանը (կիրառվում է միայն Popper-ի preventOverflow փոփոխիչի համար): Լռելյայն այն է 'clippingParents' և կարող է ընդունել HTMLElement հղում (միայն JavaScript-ի միջոցով): Լրացուցիչ տեղեկությունների համար տես Popper's detectOverflow փաստաթղթերը : |
customClass |
լարային | ֆունկցիան | '' |
Ավելացրեք դասեր գործիքի հուշում, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ: |
sanitize |
բուլյան | true |
Միացնել կամ անջատել ախտահանումը: Եթե ակտիվացվի 'template' , և 'title' ընտրանքները ախտահանվեն: Տեսեք ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում : |
allowList |
օբյեկտ | Կանխադրված արժեք | Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ |
sanitizeFn |
զրոյական | ֆունկցիան | null |
Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար: |
offset |
զանգված | լարային | ֆունկցիան | [0, 0] |
Գործիքների հուշման փոխհատուցում իր թիրախի համեմատ: Դուք կարող եք տող փոխանցել տվյալների ատրիբուտներում ստորակետերով առանձնացված արժեքներով, ինչպիսիք են. Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես իր առաջին արգումենտ պարունակող popper-ի տեղադրումը, հղումը և popper-ի ուղղումները: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Ֆունկցիան պետք է վերադարձնի երկու թվերով զանգված՝ . Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը : |
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()