Patarimai

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!
• 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-bs-toggleatributą:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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. Nurodymai rodomi naudojant „Bootstrap“ RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Ir pridėjus tinkintą HTML:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Su SVG:

Sass

Kintamieji

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Naudojimas

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

Suaktyvinkite patarimą naudodami „JavaScript“:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Ž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-bs-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="tooltip-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 šią problemą, norėsite suaktyvinti patarimą iš paketo <div>arba <span>, idealiu atveju, sufokusuoti klaviatūrą naudodami tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, kaip ir data-bs-animation="". Perduodant parinktis per duomenų atributus, būtinai pakeiskite parinkties pavadinimo didžiosios ir mažosios raidės tipą iš „camelCase“ į „kebab-case“. Pavyzdžiui, užuot naudoję data-bs-customClass="beautifier", naudokite data-bs-custom-class="beautifier".

Naudojant funkciją supopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metodai

Rodyti

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.

tooltip.show()

paslėpti

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.

tooltip.hide()

perjungti

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.

tooltip.toggle()

disponuoti

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

tooltip.dispose()

įjungti

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

tooltip.enable()

išjungti

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

tooltip.disable()

perjungti Įjungta

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

tooltip.toggleEnabled()

atnaujinti

Atnaujina elemento patarimo padėtį.

tooltip.update()

getInstance

Statinis metodas, leidžiantis gauti patarimo egzempliorių, susietą su DOM elementu

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Statinis metodas, leidžiantis gauti patarimo egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Renginiai

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()