Source

Patarimai

Dokumentacija ir pavyzdžiai, kaip pridėti pasirinktinių „Bootstrap“ įrankių patarimų su CSS ir „JavaScript“, naudojant CSS3 animacijai ir duomenų atributams vietiniam pavadinimui saugoti.

Apžvalga

Ką reikia žinoti naudojant patarimo papildinį:

  • Patarimų padėties nustatymas priklauso nuo trečiosios šalies bibliotekos Popper.js . Kad patarimai veiktų, prieš bootstrap.js turite įtraukti popper.min.js arba naudoti bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper.js!
  • Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
  • Patarimai pasirenkami dėl našumo priežasčių, todėl turite patys juos inicijuoti .
  • Patarimai su nulinio ilgio pavadinimais niekada nerodomi.
  • Nurodykite container: 'body', kad išvengtumėte atvaizdavimo problemų sudėtingesniuose komponentuose (pvz., įvesties grupėse, mygtukų grupėse ir kt.).
  • Paslėptų elementų patarimų suaktyvinimas neveiks.
  • Įrankių patarimai .disabledarba disabledelementai turi būti suaktyvinti ant pakuotės elemento.
  • Kai suaktyvinama iš hipersaitų, apimančių kelias eilutes, patarimai bus centre. Naudokite white-space: nowrap;ant savo <a>, kad išvengtumėte tokio elgesio.
  • Patarimai turi būti paslėpti prieš pašalinant atitinkamus elementus iš DOM.

Turite visa tai? Puiku, pažiūrėkime, kaip jie veikia pateikdami keletą pavyzdžių.

Pavyzdys: visur įgalinkite patarimus

Vienas iš būdų inicijuoti visus patarimus puslapyje būtų pasirinkti juos pagal data-toggleatributą:

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

Pavyzdžiai

Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:

Aptemptos kelnės kito lygio keffiyeh tikriausiai nesate apie jas girdėję. Nuotraukų kabina barzda, neapdorotas džinsas, veganiškas pasiuntinių krepšys stumptown. 8 bitų amerikietiški drabužiai nuo ūkio iki stalo, mcsweeney's fixie tvarūs quinoa , turi kilpinį richardson vinilo chambray. Beard stumptown, megztiniai banh mi lomo thundercats. Tofu biodyzelinas williamsburg marfa, keturių loko mcsweeney's cleanse vegan chambray. Tikrai ironiškas amatininkas , kad ir koks būtų raktas , scenografija nuo ūkio iki stalo banksy Austin twitter rankena freegan cred neapdoroto džinsinio vienos kilmės kavos virusas.

Užveskite pelės žymeklį ant toliau pateiktų mygtukų, kad pamatytumėte keturias patarimų nuorodas: viršuje, dešinėje, apačioje ir kairėje.

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

Ir pridėjus tinkintą 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>

Naudojimas

Patarimų papildinys generuoja turinį ir žymėjimą pagal poreikį ir pagal numatytuosius nustatymus pateikia patarimus po jų aktyviklio elemento.

Suaktyvinkite patarimą naudodami „JavaScript“:

$('#example').tooltip(options)
Perpildymas autoirscroll

Patarimo padėtis bandoma automatiškai pakeisti, kai pirminiame sudėtiniame rodinyje yra overflow: autoarba overflow: scrollpatinka mūsų .table-responsive, bet vis tiek išlaikoma pradinė paskirties vietos padėtis. Norėdami išspręsti šią boundaryparinktį, nustatykite bet ką kitą, o ne numatytąją reikšmę 'scrollParent', pvz 'window'.:

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

Žymėjimas

Reikalingas patarimo žymėjimas yra tik dataatributas ir titleHTML elemente, kuriame norite turėti patarimą. Sugeneruotas patarimo žymėjimas yra gana paprastas, nors tam reikia padėties (pagal numatytuosius nustatymus, topkurią nustato papildinys).

Patarimų pritaikymas klaviatūros ir pagalbinių technologijų naudotojams

Įrankių patarimus turėtumėte pridėti tik prie HTML elementų, kurie tradiciškai yra skirti klaviatūrai ir yra interaktyvūs (pvz., nuorodos ar formos valdikliai). Nors savavališkus HTML elementus (pvz., <span>s) galima fokusuoti pridedant tabindex="0"atributą, klaviatūros naudotojams neinteraktyviuose elementuose bus galimai erzinančių ir klaidinančių tabuliavimo taškų. Be to, dauguma pagalbinių technologijų šiuo metu nepateikia patarimo šioje situacijoje.

Be to, nepasikliaukite vien tik hoverpatarimo aktyvikliu, nes dėl to klaviatūros naudotojai negalės suaktyvinti patarimų.

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

Išjungti elementai

Elementai su disabledatributu nėra interaktyvūs, o tai reiškia, kad naudotojai negali sufokusuoti, užvesti pelės žymeklio arba spustelėti jų, kad suaktyvintų patarimą (arba iššokantįjį ekraną). Norėdami išspręsti problemą, norėsite suaktyvinti patarimą iš paketo <div>arba <span>, idealiai pritaikyto klaviatūrai, naudojant tabindex="0", ir nepaisyti pointer-eventsišjungto elemento.

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

vardas Tipas Numatytas apibūdinimas
animacija loginis tiesa Patarimui pritaikykite CSS išnykimo perėjimą
konteineris styga | elementas | klaidinga klaidinga

Prideda patarimą prie konkretaus elemento. Pavyzdys container: 'body':. Ši parinktis ypač naudinga, nes leidžia įdėti patarimą dokumento sraute šalia paleidimo elemento – tai neleis patarimui nuslysti nuo paleidimo elemento keičiant lango dydį.
uždelsimas numeris | objektas 0

Patarimo rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui

Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti

Objekto struktūra yra tokia:delay: { "show": 500, "hide": 100 }
html loginis klaidinga

Leisti HTML patarime.

Jei tiesa, patarime esančios HTML žymos titlebus pateiktos patarime. Jei klaidinga, textturiniui įterpti į DOM bus naudojamas jQuery metodas.

Jei nerimaujate dėl XSS atakų, naudokite tekstą.
išdėstymas styga | funkcija "viršuje"

Kaip išdėstyti patarimo vietą – auto | viršuje | apačioje | paliko | teisingai.
Kai autonurodyta, jis dinamiškai pakeis patarimo kryptį.

Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra patarimo DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas thisnustatytas į patarimo egzempliorių.
parinkiklis styga | klaidinga klaidinga Jei yra parinkiklis, patarimo objektai bus deleguoti nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį pridėti iššokančių langų. Žiūrėkite tai ir informatyvų pavyzdį .
šabloną styga '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Pagrindinis HTML, naudojamas kuriant patarimą.

Įrankio antgalis titlebus įšvirkščiamas į .tooltip-inner.

.arrowtaps patarimo rodykle.

Tolimiausias apvyniojimo elementas turi turėti .tooltipklasę ir role="tooltip".
titulą styga | elementas | funkcija ''

Numatytoji pavadinimo reikšmė, jei titleatributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio pridėtas patarimas.
paleidiklis styga „fokusuoti ant pelės žymeklio“

Kaip suaktyvinamas patarimas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu.

'manual'nurodo, kad patarimas bus suaktyvintas programiškai naudojant .tooltip('show')ir metodus .tooltip('hide'); .tooltip('toggle')ši vertė negali būti derinama su jokiu kitu aktyvikliu.

'hover'savaime sukels patarimus, kurių negalima suaktyvinti naudojant klaviatūrą, ir jie turėtų būti naudojami tik tuo atveju, jei yra alternatyvių būdų, kaip perduoti tą pačią informaciją klaviatūros naudotojams.
kompensuoti numeris | styga 0 Patarimo poslinkis, palyginti su jo tikslu. Daugiau informacijos rasite Popper.js poslinkio dokumentuose .
atsarginė vieta styga | masyvas "apversti" Leiskite nurodyti, kurią poziciją Popper naudos atšaukdamas. Daugiau informacijos rasite Popper.js elgesio dokumentuose
riba styga | elementas 'scrollParent' Patarimo perpildymo apribojimo riba. Priima , , arba HTMLElement nuorodos reikšmes 'viewport'( 'window'tik 'scrollParent'JavaScript). Daugiau informacijos rasite Popper.js preventOverflow dokumentuose .

Duomenų atributai atskiriems patarimams

Atskirų patarimų parinktis taip pat galima nurodyti naudojant duomenų atributus, kaip paaiškinta aukščiau.

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite „JavaScript“ dokumentacijoje.

$().tooltip(options)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.tooltipįvykį). Tai laikoma „rankiniu“ patarimo paleidimu. Patarimai su nulinio ilgio pavadinimais niekada nerodomi.

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

.tooltip('hide')

Slepia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.tooltipįvykį). Tai laikoma „rankiniu“ patarimo paleidimu.

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

.tooltip('toggle')

Perjungia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.tooltiparba hidden.bs.tooltipįvykiui). Tai laikoma „rankiniu“ patarimo paleidimu.

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

.tooltip('dispose')

Slepia ir sunaikina elemento patarimą. Įrankių patarimai, kuriuose naudojamas delegavimas (kurie sukurti naudojant parinktį selector) , negali būti sunaikinami atskirai dėl palikuonių aktyviklio elementų.

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

.tooltip('enable')

Suteikia elemento patarimui galimybę būti rodomas. Patarimai įjungti pagal numatytuosius nustatymus.

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

.tooltip('disable')

Pašalina galimybę rodyti elemento patarimą. Patarimas galės būti rodomas tik tada, kai jis bus įjungtas iš naujo.

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

.tooltip('toggleEnabled')

Perjungia galimybę rodyti arba paslėpti elemento patarimą.

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

.tooltip('update')

Atnaujina elemento patarimo padėtį.

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

Renginiai

Renginio tipas apibūdinimas
Rodyti.bs.patarimą Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.patarimas Šis įvykis suaktyvinamas, kai patarimas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.patarimas Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.patarimas Šis įvykis suaktyvinamas, kai patarimas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
įterptas.bs.patarimas Šis įvykis suaktyvinamas po show.bs.tooltipįvykio, kai patarimo šablonas buvo įtrauktas į DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})