Tooltips

Ħarsa ġenerali

Affarijiet li għandek tkun taf meta tuża l-plugin tooltip:

• Tooltips jiddependu fuq il-librerija ta 'parti terza Popper għall-ippożizzjonar. Trid tinkludi popper.min.js qabel bootstrap.js, jew tuża waħda bootstrap.bundle.min.jsli fiha Popper.
• Tooltips huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
• Tooltips b'titli ta' tul żero qatt ma jintwerew.
• Speċifika container: 'body'biex tevita problemi ta' rendering f'komponenti aktar kumplessi (bħal gruppi ta' input tagħna, gruppi ta' buttuni, eċċ).
• It-tqajjem tooltips fuq elementi moħbija mhux se jaħdem.
• Tooltips għal .disabledjew disabledelementi għandhom jiġu attivati ​​fuq element tat-tgeżwir.
• Meta jiġu attivati ​​minn hyperlinks li jkopru linji multipli, it-tooltips se jkunu ċċentrati. Uża white-space: nowrap;fuq tiegħek <a>biex tevita din l-imġieba.
• Tooltips għandhom ikunu moħbija qabel ma l-elementi korrispondenti tagħhom ikunu tneħħew mid-DOM.
• Tooltips jistgħu jiġu attivati ​​grazzi għal element ġewwa dell DOM.

Ghandek dak kollu? Kbir, ejja naraw kif jaħdmu ma 'xi eżempji.

Eżempji

Ippermetti tooltips

Kif issemma hawn fuq, trid inizjalizzaw tooltips qabel ma jkunu jistgħu jintużaw. Mod wieħed biex jiġu inizjalizzati l-tooltips kollha fuq paġna jkun li tagħżelhom skont l- data-bs-toggleattribut tagħhom, bħal dan:

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

Tooltips dwar links

Passa fuq il-links hawn taħt biex tara l-għodda:

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

Tooltips tad-dwana

Tista' tippersonalizza d-dehra ta' tooltips billi tuża varjabbli CSS . Aħna waqqafna klassi tad-dwana data-bs-custom-class="custom-tooltip"biex niskopru d-dehra tad-dwana tagħna u nużawha biex tegħleb varjabbli CSS lokali.

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

Direzzjonijiet

Passa fuq il-buttuni ta' hawn taħt biex tara l-erba' direzzjonijiet tal-għodda: ta' fuq, tal-lemin, ta' isfel u tax-xellug. Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'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>

U b'HTML personalizzat miżjud:

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

B'SVG:

CSS

Varjabbli

Bħala parti mill-approċċ tal-varjabbli tas-CSS li qed jevolvu ta' Bootstrap, it-tooltips issa jużaw varjabbli tas-CSS lokali .tooltipgħal adattament imtejjeb f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

  --#{$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};
  

Sass varjabbli

$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

Użu

Il-plugin tooltip jiġġenera kontenut u markup fuq talba, u awtomatikament iqiegħed tooltips wara l-element grillu tagħhom.

Agħmel it-tooltip permezz ta' 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

Il-markup meħtieġ għal tooltip huwa biss dataattribut u titlefuq l-element HTML tixtieq li jkollok tooltip. Il-markup iġġenerat ta' tooltip huwa pjuttost sempliċi, għalkemm jeħtieġ pożizzjoni (b'mod awtomatiku, issettjat topmill-plugin).

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

Elementi b'diżabilità

L-elementi bl- disabledattribut mhumiex interattivi, jiġifieri l-utenti ma jistgħux jiffokaw, jgħadduhom jew ikklikkjahom biex jagħtu bidu għal tooltip (jew popover). Bħala soluzzjoni alternattiva, tkun trid tiskatta l-għodda minn tgeżwir <div>jew <span>, idealment magħmula li tiffoka fuq it-tastiera billi tuża 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>

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Bl-użu tal-funzjoni mapopperConfig

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

Metodi

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

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

Avvenimenti

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

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

tooltip.hide()