Tooltips

Ħarsa ġenerali

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

• Tooltips jiddependu fuq il-librerija tal-parti 3 Popper għall-ippożizzjonar. Trid tinkludi popper.min.js qabel bootstrap.js jew tuża bootstrap.bundle.min.js/ bootstrap.bundle.jsli fih Popper sabiex it-tooltips jaħdmu!
• 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żempju: Ippermetti tooltips kullimkien

Mod wieħed biex jiġu inizjalizzati l-għodda kollha fuq paġna jkun li tagħżelhom skont l- data-bs-toggleattribut tagħhom:

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

Eżempji

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

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

U b'HTML personalizzat miżjud:

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

B'SVG:

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:                    0;

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

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:

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

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" 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-tooltip 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-, bħal f' data-bs-animation="". Kun żgur li tibdel 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, minflok tuża data-bs-customClass="beautifier", uża data-bs-custom-class="beautifier".

Bl-użu tal-funzjoni mapopperConfig

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

Metodi

juru

Tiżvela tooltip ta' element. Jirritorna lil min iċempel qabel ma jkun intwera l-għodda (jiġifieri qabel ma shown.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip. Tooltips b'titli ta' tul żero qatt ma jintwerew.

tooltip.show()

ħabi

Jaħbi tooltip ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun ġiet moħbija (jiġifieri qabel ma hidden.bs.tooltipjseħħ l-avveniment). Dan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

tooltip.hide()

toggle

Jiddawwar l-għodda ta' element. Jirritorna lil min iċempel qabel ma l-għodda tkun intweriet jew moħbija (jiġifieri qabel ma jseħħ l-avveniment shown.bs.tooltipjew ). hidden.bs.tooltipDan huwa meqjus bħala attivazzjoni "manwali" tal-tooltip.

tooltip.toggle()

jiddisponi

Jaħbi u jeqred it-tooltip ta' element (Tneħħi d-dejta maħżuna fuq l-element DOM). Tooltips li jużaw id-delega (li huma maħluqa bl -użu tal - selectorgħażla ) ma jistgħux jinqerdu individwalment fuq elementi ta 'grillu dixxendenti.

tooltip.dispose()

jippermettu

Jagħti l-abbiltà li jintwera tooltip ta' element. Tooltips huma attivati ​​awtomatikament.

tooltip.enable()

jiskonnettja

Tneħħi l-abbiltà li l-tooltip ta' element jintwera. It-tooltip tkun tista' tintwera biss jekk terġa' tiġi attivata.

tooltip.disable()

toggleEnabled

Jiddawwar l-abbiltà li l-tooltip ta' element jintwera jew moħbi.

tooltip.toggleEnabled()

aġġornament

Taġġorna l-pożizzjoni tat-tooltip ta' element.

tooltip.update()

getInstance

Metodu statiku li jippermettilek li tikseb l-istanza tooltip assoċjata ma 'element DOM

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

getOrCreateInstance

Metodu statiku li jippermettilek li tikseb l-istanza tat-tooltip assoċjata ma' element DOM, jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata

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

Avvenimenti

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

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

tooltip.hide()