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 më parë bootstrap.js, ose të përdorni një bootstrap.bundle.min.jsqë përmban Popper.
• 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.

Shembuj

Aktivizo këshillat e veglave

Siç u përmend më lart, duhet të inicializoni këshillat e veglave përpara se të mund të përdoren. 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, si kjo:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Këshilla për veglat për lidhjet

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Këshilla të personalizuara të veglave

Ju mund të personalizoni pamjen e këshillave të veglave duke përdorur variablat CSS . Ne vendosëm një klasë të personalizuar me data-bs-custom-class="custom-tooltip"të për të shtrirë pamjen tonë të personalizuar dhe e përdorim atë për të anashkaluar një ndryshore lokale CSS.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Drejtimet

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Me një SVG:

CSS

Variablat

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, këshillat e veglave tani përdorin variabla lokale CSS .tooltippër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Variablat Sass

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". 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, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

Përdorimi i funksionit mepopperConfig

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

Metodat

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Ngjarjet

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()