in English

Këshilla për veglat

Dokumentacion dhe shembuj për shtimin e këshillave të veglave të personalizuara të Bootstrap me CSS dhe JavaScript duke përdorur CSS3 për animacione dhe atribute të dhënash për ruajtjen e titujve lokalë.

Vështrim i përgjithshëm

Gjërat që duhet të dini kur përdorni shtojcën e këshillës së veglave:

  • Këshillat e veglave mbështeten në bibliotekën e palës së tretë Popper për pozicionimin. Ju duhet të përfshini popper.min.js përpara bootstrap.js ose përdorni bootstrap.bundle.min.js/bootstrap.bundle.js që përmban Popper në mënyrë që këshillat e veglave të funksionojnë!
  • Nëse po ndërtoni JavaScript-in tonë nga burimi, kjo kërkonutil.js .
  • Këshillat e veglave janë të zgjedhura për arsye të performancës, prandaj duhet t'i inicializoni vetë .
  • Këshillat e veglave me tituj me gjatësi zero nuk shfaqen kurrë.
  • Përcaktonicontainer: 'body' për të shmangur paraqitjen e problemeve në komponentë më kompleksë (si grupet tona të hyrjes, grupet e butonave, etj.).
  • Aktivizimi i këshillave të veglave në elementë të fshehur nuk do të funksionojë.
  • Këshilla për veglat për .disabledosedisabled elementët duhet të aktivizohen në një element mbështjellës.
  • Kur aktivizohen nga hiperlidhjet që përfshijnë linja të shumta, këshillat e veglave do të përqendrohen. Përdorni white-space: nowrap;në tuaj<a> për të shmangur këtë sjellje.
  • Këshillat e veglave duhet të fshihen përpara se elementët e tyre përkatës të hiqen nga DOM.
  • Këshillat e veglave mund të aktivizohen falë një elementi brenda një DOM hije.
Si parazgjedhje, ky komponent përdor dezinfektuesin e integruar të përmbajtjes, i cili heq çdo element HTML që nuk lejohet në mënyrë eksplicite. Shikoni seksionin e dezinfektuesit në dokumentacionin tonë JavaScript për më shumë detaje.
Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

I keni të gjitha këto? E shkëlqyeshme, le të shohim se si funksionojnë me disa shembuj.

Shembull: Aktivizo këshillat e veglave kudo

Një mënyrë për të inicializuar të gjitha këshillat e veglave në një faqe do të ishte përzgjedhja e tyre sipas data-toggleatributit të tyre:

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

Shembuj

Zhvendosni mbi lidhjet e mëposhtme për të parë këshillat e veglave:

Teksti i vendmbajtësit për të demonstruar disa lidhje inline me këshilla veglash. Ky tani është vetëm mbushës, jo vrasës. Përmbajtja e vendosur këtu vetëm për të imituar praninë e tekstit real . Dhe e gjithë kjo vetëm për t'ju dhënë një ide se si do të dukeshin këshillat e veglave kur përdoren në situata të botës reale. Pra, shpresojmë se tani e keni parë se si këto këshilla veglash në lidhje mund të funksionojnë në praktikë, pasi t'i përdorni ato në faqen ose projektin tuaj .

Zhvendosni pezull mbi butonat më poshtë për të parë udhëzimet e katër këshillave të veglave: lart, djathtas, poshtë dhe majtas.

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

Dhe me HTML të shtuar të personalizuar:

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

Përdorimi

Shtojca e këshillës së veglave gjeneron përmbajtje dhe shënime sipas kërkesës, dhe si parazgjedhje vendos këshillat e veglave pas elementit të tyre të aktivizimit.

Aktivizoni këshillën e veglave përmes JavaScript:

$('#example').tooltip(options)
Mbushje autodhescroll

Pozicioni i këshillës së veglave përpiqet të ndryshojë automatikisht kur një kontejner prind ka overflow: autoose overflow: scrollpëlqen tonën .table-responsive, por ende ruan pozicionimin e vendosjes origjinale. Për të zgjidhur, vendosni boundaryopsionin në çdo gjë tjetër përveç vlerës së paracaktuar, si 'scrollParent'p.sh.'window'

$('#example').tooltip({ boundary: 'window' })

Markup

Shënimi i kërkuar për një këshillë mjeti është vetëm një dataatribut dhe titlenë elementin HTML dëshironi të keni një këshillë mjeti. Shënimi i krijuar i një këshille veglash është mjaft i thjeshtë, megjithëse kërkon një pozicion (si parazgjedhje, i caktuar topnga shtojca).

Bërja që këshillat e veglave të funksionojnë për përdoruesit e tastierës dhe teknologjisë ndihmëse

Ju duhet të shtoni vetëm këshilla veglash në elementët HTML që tradicionalisht janë të fokusuar në tastierë dhe ndërveprues (të tilla si lidhjet ose kontrollet e formularit). Megjithëse elementët arbitrarë të HTML (si p.sh. <span>s) mund të bëhen të fokusueshëm duke shtuar tabindex="0"atributin, kjo do të shtojë skeda potencialisht të bezdisshme dhe konfuze në elementët jointeraktivë për përdoruesit e tastierës dhe shumica e teknologjive ndihmëse aktualisht nuk e shpallin këshillën e veglave në këtë situatë. Për më tepër, mos u mbështetni vetëm hoversi shkas për këshillën tuaj të veglave, pasi kjo do ta bëjë të pamundur aktivizimin e këshillave tuaja të veglave për përdoruesit e tastierës.

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

Elemente me aftësi të kufizuara

Elementet me disabledatributin nuk janë ndërveprues, që do të thotë se përdoruesit nuk mund të fokusohen, të qëndrojnë pezull ose t'i klikojnë për të aktivizuar një këshillë veglash (ose popover). Si zgjidhje, do të dëshironi të aktivizoni këshillën e veglave nga një mbështjellës <div>ose <span>, i bërë në mënyrë ideale të fokusueshme në tastierë duke përdorur tabindex="0", dhe të anashkaloni pointer-eventselementin e çaktivizuar.

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si nëdata-animation="" .

Vini re se për arsye sigurie opsionet sanitize, sanitizeFndhe whiteListnuk mund të ofrohen duke përdorur atributet e të dhënave.
Emri Lloji E paracaktuar Përshkrim
animacion logjike e vërtetë Aplikoni një tranzicion të zbehjes së CSS në këshillën e veglave
enë varg | element | i rremë i rremë

Shton këshillën e veglave në një element specifik. Shembull: container: 'body'. Ky opsion është veçanërisht i dobishëm në atë që ju lejon të poziciononi këshillën e mjetit në rrjedhën e dokumentit pranë elementit nxitës - gjë që do të parandalojë që këshilla e veglës të largohet nga elementi nxitës gjatë një ndryshimi të madhësisë së dritares.
vonesë numri | Objekt 0

Vonesa e shfaqjes dhe fshehjes së këshillës së veglës (ms) - nuk vlen për llojin manual të shkrepjes

Nëse jepet një numër, vonesa zbatohet për të dy fshehjen/shfaqjen

Struktura e objektit është:delay: { "show": 500, "hide": 100 }
html logjike i rremë

Lejo HTML në këshillën e veglave.

Nëse është e vërtetë, etiketat HTML në këshillat e veglave titledo të paraqiten në këshillën e veglave. Nëse është false, textmetoda e jQuery do të përdoret për të futur përmbajtje në DOM.

Përdorni tekst nëse jeni të shqetësuar për sulmet XSS.
vendosja varg | funksionin 'majë'

Si të poziciononi këshillën e veglave - auto | krye | fund | majtas | drejtë.
Kurauto të specifikohet, do të riorientojë në mënyrë dinamike këshillën e veglave.

Kur një funksion përdoret për të përcaktuar vendosjen, ai thirret me nyjen DOM si argument të parë dhe elementin nxitës nyjen DOM si të dytën. Konteksti thisështë vendosur në shembullin e këshillës së veglave.
përzgjedhës varg | i rremë i rremë Nëse ofrohet një përzgjedhës, objektet e këshillës së veglave do t'u delegohen objektivave të specifikuara. Në praktikë, kjo përdoret për të aplikuar gjithashtu këshilla veglash për elementët DOM të shtuar në mënyrë dinamike ( jQuery.onmbështetje). Shihni këtë dhe një shembull informues .
shabllon varg '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Bazë HTML për t'u përdorur kur krijoni këshillën e veglave.

Maja e veglave titledo të injektohet në .tooltip-inner.

.arrowdo të bëhet shigjeta e udhëzuesit.

Elementi më i jashtëm i mbështjellësit duhet të ketë .tooltipklasën dhe role="tooltip".
titullin varg | element | funksionin ''

Vlera e parazgjedhur e titullit nëse titleatributi nuk është i pranishëm.

Nëse jepet një funksion, ai do të thirret me grupin e tij thistë referencës tek elementi të cilit i është bashkangjitur këshilla e veglave.
shkas varg "Fokusi rri pezull"

Si aktivizohet këshilla e veglave - klikoni | rri pezull | fokus | manual. Ju mund të kaloni disa shkaktarë; ndani ato me një hapësirë.

'manual'tregon se këshilla e veglave do të aktivizohet në mënyrë programore nëpërmjet .tooltip('show'), .tooltip('hide')dhe .tooltip('toggle')metodave; kjo vlerë nuk mund të kombinohet me asnjë shkas tjetër.

'hover'vetvetiu do të rezultojë në këshilla veglash që nuk mund të aktivizohen nëpërmjet tastierës dhe duhet të përdoren vetëm nëse ekzistojnë metoda alternative për përcjelljen e të njëjtit informacion për përdoruesit e tastierës.
kompensuar numri | varg | funksionin 0

Kompensimi i këshillës së veglave në lidhje me objektivin e tij.

Kur një funksion përdoret për të përcaktuar kompensimin, ai thirret me një objekt që përmban të dhënat e kompensimit si argument të parë. Funksioni duhet të kthejë një objekt me të njëjtën strukturë. Nyja DOM e elementit nxitës kalohet si argumenti i dytë.

Për më shumë informacion referojuni dokumenteve të kompensimit të Popper-it .
kthimi i vendosjes varg | varg 'rrokullisje' Lejoni të specifikoni se cilin pozicion do të përdorë Popper në rikthim. Për më shumë informacion referojuni dokumenteve të sjelljes së Popper-it
Klasa me porosi varg | funksionin ''

Shtoni klasa në këshillën e veglave kur shfaqet. Vini re se këto klasa do të shtohen përveç çdo klase të specifikuar në shabllon. Për të shtuar klasa të shumta, ndajini ato me hapësira:'a b' .

Ju gjithashtu mund të kaloni një funksion që duhet të kthejë një varg të vetëm që përmban emra shtesë të klasave.
kufiri varg | element 'scrollParent' Kufiri i kufizimit të tejmbushjes së majës së veglave. Pranon vlerat e 'viewport', 'window', 'scrollParent', ose një referencë HTMLElement (vetëm JavaScript). Për më shumë informacion, referojuni dokumenteve të preventOverflow të Popper .
dezinfektoj logjike e vërtetë Aktivizoni ose çaktivizoni dezinfektimin. Nëse aktivizohet 'template'dhe 'title'opsionet do të dezinfektohen. Shihni seksionin e dezinfektuesit në dokumentacionin tonë JavaScript .
listën e bardhë Objekt Vlera e paracaktuar Objekti që përmban atribute dhe etiketa të lejuara
dezinfektojFn null | funksionin i pavlefshëm Këtu mund të siguroni funksionin tuaj të dezinfektimit. Kjo mund të jetë e dobishme nëse preferoni të përdorni një bibliotekë të dedikuar për të kryer dezinfektim.
popperConfig null | Objekt i pavlefshëm Për të ndryshuar konfigurimin e paracaktuar të Popper të Bootstrap, shihni konfigurimin e Popper

Atributet e të dhënave për këshilla individuale të veglave

Opsionet për këshilla të veglave individuale mund të specifikohen në mënyrë alternative nëpërmjet përdorimit të atributeve të të dhënave, siç shpjegohet më sipër.

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion .

$().tooltip(options)

Bashkangjit një mbajtës udhëzues në një koleksion elementesh.

.tooltip('show')

Zbulon udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të shfaqet (dmth. përpara se të shown.bs.tooltipndodhë ngjarja). Ky konsiderohet si një aktivizim "manual" i këshillës së veglave. Këshillat e veglave me tituj me gjatësi zero nuk shfaqen kurrë.

$('#element').tooltip('show')

.tooltip('hide')

Fsheh udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të jetë fshehur (dmth. përpara se të hidden.bs.tooltipndodhë ngjarja). Ky konsiderohet si një aktivizim "manual" i këshillës së veglave.

$('#element').tooltip('hide')

.tooltip('toggle')

Ndryshon udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.tooltipose ). hidden.bs.tooltipKy konsiderohet si një aktivizim "manual" i këshillës së veglave.

$('#element').tooltip('toggle')

.tooltip('dispose')

Fsheh dhe shkatërron udhëzuesin e një elementi. Këshillat e veglave që përdorin delegimin (të cilat krijohen duke përdorur opsionin selector) nuk mund të shkatërrohen individualisht në elementët e aktivizimit pasardhës.

$('#element').tooltip('dispose')

.tooltip('enable')

I jep këshillës së një elementi aftësinë për t'u shfaqur. Këshillat e veglave janë aktivizuar si parazgjedhje.

$('#element').tooltip('enable')

.tooltip('disable')

Heq aftësinë për të shfaqur këshillën e një elementi. Këshilla e veglave do të mund të shfaqet vetëm nëse riaktivizohet.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Ndryshon aftësinë që këshilla e veglave të një elementi të shfaqet ose të fshihet.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Përditëson pozicionin e këshillës së veglave të një elementi.

$('#element').tooltip('update')

Ngjarjet

Lloji i ngjarjes Përshkrim
shfaq.bs.tip mjeti Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar.bs.tooltip Kjo ngjarje aktivizohet kur këshilla e veglave është bërë e dukshme për përdoruesin (do të presë që kalimet CSS të përfundojnë).
fsheh.bs.tooltip Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
i fshehur.bs.tooltip Kjo ngjarje aktivizohet kur këshilla e veglave të ketë përfunduar së fshehuri nga përdoruesi (do të presë që kalimet CSS të përfundojnë).
futur.bs.tooltip Kjo ngjarje aktivizohet pas show.bs.tooltipngjarjes kur shablloni i këshillës së veglave është shtuar në DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})