Cynghorion offer

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn cyngor:

• Mae cynghorion offer yn dibynnu ar Popper llyfrgell 3ydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper er mwyn i tooltips weithio!
• Mae awgrymiadau offer yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
• Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.
• Nodwch container: 'body'er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati).
• Ni fydd ysgogi awgrymiadau offer ar elfennau cudd yn gweithio.
• Rhaid ysgogi awgrymiadau offer ar gyfer .disabledneu disabledelfennau ar elfen lapio.
• Pan gânt eu hysgogi gan hyperddolenni sy'n ymestyn dros linellau lluosog, bydd cynghorion offer yn cael eu canoli. Defnyddiwch white-space: nowrap;ar eich <a>s i osgoi'r ymddygiad hwn.
• Rhaid cuddio awgrymiadau offer cyn i'w helfennau cyfatebol gael eu tynnu o'r DOM.
• Gellir sbarduno cynghorion offer diolch i elfen y tu mewn i DOM cysgodol.

Wedi cael hynny i gyd? Gwych, gadewch i ni weld sut maen nhw'n gweithio gyda rhai enghreifftiau.

Enghraifft: Galluogi cynghorion offer ym mhobman

Un ffordd o gychwyn pob cyngor offer ar dudalen fyddai eu dewis yn ôl eu data-bs-togglepriodoledd:

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

Enghreifftiau

Hofran dros y dolenni isod i weld awgrymiadau offer:

Hofran dros y botymau isod i weld y pedwar cyfarwyddyd cyngor offer: top, dde, gwaelod, a chwith. Caiff cyfarwyddiadau eu hadlewyrchu wrth ddefnyddio Bootstrap yn 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>

A chyda HTML personol wedi'i ychwanegu:

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

Gyda SVG:

Sass

Newidynnau

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

Defnydd

Mae'r ategyn tooltip yn cynhyrchu cynnwys a marcio yn ôl y galw, ac yn ddiofyn yn gosod awgrymiadau offer ar ôl eu helfen sbarduno.

Sbardunwch y cyngor trwy 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')
})

Marcio

Priodoledd yn unig yw'r marcio gofynnol ar gyfer cyngor offer dataac titlear yr elfen HTML rydych chi'n dymuno cael cyngor. Mae'r marcio a gynhyrchir o gyngor offer braidd yn syml, er bod angen safle (yn ddiofyn, wedi'i osod topgan yr ategyn).

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

Elfennau anabl

Nid yw elfennau gyda'r disabledpriodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr ganolbwyntio, hofran na chlicio arnynt i sbarduno cyngor (neu popover). Fel ateb i'r broblem, byddwch am sbarduno'r cyngor offer o ddeunydd lapio <div>neu <span>, sy'n ddelfrydol wedi'i wneud â ffocws bysellfwrdd gan ddefnyddio 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>

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-animation="". Gwnewch yn siŵr eich bod yn newid math achos enw'r opsiwn o camelCase i achos cebab wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, yn lle defnyddio data-bs-customClass="beautifier", defnyddiwch data-bs-custom-class="beautifier".

Defnyddio swyddogaeth gydapopperConfig

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

Dulliau

dangos

Yn datgelu cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei ddangos (hy cyn i'r shown.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor. Nid yw awgrymiadau offer gyda theitlau hyd sero byth yn cael eu harddangos.

tooltip.show()

cuddio

Yn cuddio cyngor offer elfen. Yn dychwelyd at y galwr cyn i'r cyngor gael ei guddio (hy cyn i'r hidden.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor.

tooltip.hide()

togl

Toglo cyngor offer elfen. Yn dychwelyd i'r galwr cyn i'r cyngor gael ei ddangos neu ei guddioshown.bs.tooltip ( hy cyn i'r hidden.bs.tooltipdigwyddiad ddigwydd). Ystyrir hyn yn sbardun “â llaw” o'r cyngor.

tooltip.toggle()

gwared

Yn cuddio ac yn dinistrio cyngor offer elfen (Yn dileu data sydd wedi'i storio ar yr elfen DOM). Ni all awgrymiadau offer sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynnydd .

tooltip.dispose()

galluogi

Yn rhoi'r gallu i gyngor offer elfen gael ei ddangos. Mae awgrymiadau offer yn cael eu galluogi yn ddiofyn.

tooltip.enable()

analluogi

Yn dileu'r gallu i ddangos cyngor offer elfen. Dim ond os caiff ei ail-alluogi y bydd modd dangos y cyngor.

tooltip.disable()

toggleEnabled

Toglo'r gallu i awgrym offer elfen gael ei ddangos neu ei guddio.

tooltip.toggleEnabled()

diweddariad

Yn diweddaru lleoliad cyngor offer elfen.

tooltip.update()

caelInstance

Dull statig sy'n eich galluogi i gael yr enghraifft cyngor offer sy'n gysylltiedig ag elfen DOM

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

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft tip offer yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

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

Digwyddiadau

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

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

tooltip.hide()