Source

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.js për pozicionimin. Duhet të përfshini popper.min.js përpara bootstrap.js ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper.js në mënyrë që këshillat e veglave të funksionojnë!
  • Nëse po ndërtoni JavaScript-in tonë nga burimi, ai 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ë.
  • Specifikoni container: '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ëshillat e veglave për .disabledose disabledelementë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.

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:

Pantallona të ngushta keffiyeh të nivelit tjetër që ndoshta nuk keni dëgjuar për to. Kabina e fotografive mjekër xhins të papërpunuar me çantë vegane për lajmëtarë stumptown. Veshjet amerikane 8-bitëshe nga ferma në tavolinë, kuinoa e qëndrueshme e mcsweeney's kanë një shambre vinyl terry richardson. Stumptown me mjekër, kardigane banh mi lomo thundercats. Tofu bionaftë williamsburg marfa, katër loko mcsweeney's cleanse chambray vegan. Një artizan me të vërtetë ironik , çfarëdo keytar , skenografi nga ferma në tavolinë banksy Austin twitter handle freegan cred raw xhins kafe me origjinë të vetme.

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ë fokusueshëm 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>, e bërë në mënyrë ideale e fokusuar 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 veglave 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ë ndryshimit 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ë.
Kur autotë 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 offset të Popper.js .
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.js
kufiri varg | element 'scrollParent' Kufiri i kufizimit të tejmbushjes së këshillë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.js .
dezinfektoj logjike e vërtetë Aktivizo ose çaktivizo dezinfektimin. Nëse aktivizohet 'template'dhe 'title'opsionet do të dezinfektohen.
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.js të Bootstrap, shihni konfigurimin e Popper.js

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). Kjo 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). Kjo 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.tooltipKjo 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 ka përfunduar së fshehuri nga përdoruesi (do të presë që të plotësohen tranzicionet CSS).
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...
})