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 remiasi trečiosios šalies biblioteka „ Popper “. Kad patarimai veiktų, prieš bootstrap.js turite įtraukti popper.min.js arba naudoti bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper!
• Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
• Patarimai pasirenkami dėl našumo priežasčių, todėl turite juos inicijuoti patys .
• 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.
• Patarimai gali būti suaktyvinti dėl elemento šešėlinio DOM viduje.

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:

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)

$('#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).

<!-- 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 ar spustelėti jų, kad suaktyvintų patarimą (arba iššokantįjį ekraną). Norėdami išspręsti problemą, norėsite suaktyvinti patarimą iš aplanko <div>arba <span>, idealiu atveju, kad būtų galima sufokusuoti klaviatūrą 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="".

Metodai

$().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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})