Գործիքների հուշումներ
Փաստաթղթեր և օրինակներ՝ CSS-ով և JavaScript-ով հատուկ Bootstrap-ի գործիքների հուշումներ ավելացնելու համար՝ օգտագործելով CSS3 անիմացիաների և տվյալների ատրիբուտների՝ տեղական անվանումների պահպանման համար:
Ընդհանուր ակնարկ
Գործիքների հուշում հավելվածն օգտագործելիս պետք է իմանալ.
- Գործիքների հուշումները հիմնվում են 3-րդ կողմի Popper գրադարանի վրա դիրքորոշման համար: Դուք պետք է ներառեք popper.min.js-ը bootstrap.js-ից առաջ կամ օգտագործեք
bootstrap.bundle.min.js
/bootstrap.bundle.js
որը պարունակում է Popper, որպեսզի գործիքի հուշումները աշխատեն: - Եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում է
util.js
: - Գործիքների հուշումները միացված են կատարողականի նկատառումներով, այնպես որ դուք պետք է դրանք սկզբնավորեք ինքներդ :
- Գործիքների հուշումները զրոյական երկարությամբ վերնագրերով երբեք չեն ցուցադրվում:
- Նշեք
container: 'body'
՝ ավելի բարդ բաղադրիչներում խնդիրներ չարտադրելու համար (օրինակ՝ մեր մուտքային խմբերը, կոճակների խմբերը և այլն): - Թաքնված տարրերի վրա գործիքների հուշումները գործարկելը չի աշխատի:
- Գործիքների հուշումները
.disabled
կամdisabled
տարրերը պետք է գործարկվեն փաթաթող տարրի վրա: - Երբ գործարկվում են մի քանի տողեր ընդգրկող հիպերհղումներից, գործիքի հուշումները կենտրոնացված կլինեն: Օգտագործեք
white-space: nowrap;
ձեր<a>
s-ի վրա՝ այս պահվածքից խուսափելու համար: - Գործիքների հուշումները պետք է թաքցվեն նախքան դրանց համապատասխան տարրերը DOM-ից հեռացնելը:
- Գործիքների հուշումները կարող են գործարկվել ստվերային DOM-ի ներսում գտնվող տարրի շնորհիվ:
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>
Օգտագործումը
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 անցում դեպի գործիքի հուշում |
կոնտեյներ | լարային | տարր | կեղծ | կեղծ | Կցում է գործիքի հուշումը կոնկրետ տարրին: Օրինակ՝ |
ուշացում | համարը | օբյեկտ | 0 | Գործիքների հուշումը (ms) ցուցադրելու և թաքցնելու ուշացում - չի կիրառվում ձեռքով ձգանման տեսակի համար Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
html | բուլյան | կեղծ | Թույլատրել HTML-ը գործիքի հուշում: Եթե ճիշտ է, գործիքի հուշման մեջ HTML պիտակները կարտացոլվեն Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները: |
տեղաբաշխում | լարային | ֆունկցիան | 'գագաթ' | Ինչպես տեղադրել գործիքի հուշումը - auto | վերև | ստորին | ձախ | ճիշտ. Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է գործիքի հուշումով DOM հանգույցը որպես առաջին արգումենտ և գործարկող տարրը՝ DOM հանգույցը որպես երկրորդ: Համատեքստը |
ընտրիչ | լարային | կեղծ | կեղծ | Եթե ընտրիչ է տրամադրվում, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին: Գործնականում սա օգտագործվում է նաև դինամիկորեն ավելացված DOM տարրերի համար գործիքների հուշումներ կիրառելու համար ( jQuery.on աջակցություն): Տեսեք սա և տեղեկատվական օրինակ : |
կաղապար | լար | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Հիմք HTML-ը, որը պետք է օգտագործվի գործիքի հուշում ստեղծելիս: Գործիքների հուշումները
Ամենաարտաքին փաթաթման տարրը պետք է ունենա |
կոչում | լարային | տարր | ֆունկցիան | '' | Վերնագրի կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
ձգան | լար | «սավառել ֆոկուս» | Ինչպես է գործարկվում գործիքի հուշումը - սեղմեք | սավառնել | կենտրոնացում | ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով:
|
օֆսեթ | համարը | լարային | ֆունկցիան | 0 | Գործիքների հուշման փոխհատուցում իր թիրախի համեմատ: Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես առաջին արգումենտ պարունակող օֆսեթ տվյալները: Ֆունկցիան պետք է վերադարձնի նույն կառուցվածքով օբյեկտ: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը : |
հետադարձ Տեղադրում | լարային | զանգված | «շրջել» | Թույլ տվեք նշել, թե որ դիրքը կօգտագործի Popper-ը հետադարձի ժամանակ: Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը |
customClass | լարային | ֆունկցիան | '' | Ավելացրեք դասեր գործիքի հուշում, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ: |
սահման | լարային | տարր | «scrollParent» | Գործիքի ծայրի արտահոսքի սահմանափակման սահմանը: Ընդունում է 'viewport' , 'window' , 'scrollParent' , կամ HTMLElement հղումի արժեքները (միայն JavaScript): Լրացուցիչ տեղեկությունների համար տես Popper-ի preventOverflow փաստաթղթերը : |
ախտահանել | բուլյան | ճիշտ | Միացնել կամ անջատել ախտահանումը: Եթե ակտիվացվի 'template' , և 'title' ընտրանքները ախտահանվեն: Տեսեք ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում : |
սպիտակ ցուցակ | օբյեկտ | Կանխադրված արժեք | Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ |
sanitizeFn | զրոյական | ֆունկցիան | դատարկ | Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար: |
popperConfig | զրոյական | օբյեկտ | դատարկ | Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան |
Տվյալների ատրիբուտները առանձին գործիքների հուշումների համար
Գործիքների առանձին հուշումների տարբերակները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով, ինչպես բացատրվեց վերևում:
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր 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...
})