Këshilla për veglat

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. Duhet të përfshini popper.min.js përpara bootstrap.js ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper në mënyrë që këshillat e veglave të funksionojnë!
• 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.

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-bs-toggleatributit të tyre:

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

Shembuj

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

Zhvendosni pezull mbi butonat më poshtë për të parë udhëzimet e katër këshillave të veglave: lart, djathtas, poshtë dhe majtas. Udhëzimet pasqyrohen kur përdorni Bootstrap në 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>

Dhe me HTML të shtuar të personalizuar:

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

Me një SVG:

Sass

Variablat

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

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:

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')
})

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

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

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 një 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ë fokusuar në tastierë duke përdorur 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>

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-bs-, si në data-bs-animation="". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga camelCase në kebab-case kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, në vend që të përdorni data-bs-customClass="beautifier", përdorni data-bs-custom-class="beautifier".

Përdorimi i funksionit mepopperConfig

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

Metodat

shfaqje

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

tooltip.show()

fshehin

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.

tooltip.hide()

ndërroj

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.

tooltip.toggle()

disponoj

Fsheh dhe shkatërron udhëzuesin e një elementi (Heq të dhënat e ruajtura në elementin DOM). 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.

tooltip.dispose()

mundësojnë

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

tooltip.enable()

çaktivizoni

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.

tooltip.disable()

aktivizuar

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

tooltip.toggleEnabled()

përditësimi

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

tooltip.update()

getInstance

Metoda statike e cila ju lejon të merrni shembullin e këshillës së veglave të lidhur me një element DOM

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

getOrCreateInstance

Metoda statike që ju lejon të merrni shembullin e këshillës së veglave të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

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

Ngjarjet

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

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

tooltip.hide()