Cynghorion offer

Dogfennaeth ac enghreifftiau ar gyfer ychwanegu awgrymiadau cymorth Bootstrap wedi'u teilwra gyda CSS a JavaScript gan ddefnyddio CSS3 ar gyfer animeiddiadau a phriodoleddau data ar gyfer storio teitlau lleol.

Trosolwg

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

• Mae cynghorion offer yn dibynnu ar Popper y 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!
• Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .
• 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-togglepriodoledd:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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.

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

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:

$('#example').tooltip(options)

$('#example').tooltip({ boundary: 'window' })

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-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="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 chi eisiau sbarduno'r cyngor offer o ddeunydd lapio <div>neu <span>, sy'n ddelfrydol wedi'i wneud â ffocws bysellfwrdd gan ddefnyddio tabindex="0", a diystyru'r pointer-eventselfen ar yr anabl.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" 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-, fel yn data-animation="".

Dulliau

$().tooltip(options)

Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

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.

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Yn cuddio ac yn dinistrio cyngor offer elfen. 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 .

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Yn diweddaru lleoliad cyngor offer elfen.

$('#element').tooltip('update')

Digwyddiadau

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})