Source

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 y llyfrgell 3ydd parti Popper.js ar gyfer lleoli. Mae'n rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper.js 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.

Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

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:

Pants dynn lefel nesaf keffiyeh mae'n debyg nad ydych wedi clywed amdanynt. Photo bwth barf llythrenwasg denim amrwd bag negeseuwr fegan stumptown. Mae gan seitan fferm-i-bwrdd, dillad quinoa cynaliadwy mcsweeney quinoa 8-bit Americanaidd siambr finyl terry richardson. Barf stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, pedwar loko mcsweeney's cleanse vegan chambray. Mae crefftwr eironig iawn beth bynnag keytar , scenester fferm-i-bwrdd Banky Austin twitter trin freegan cred amrwd denim un-tarddiad feirol coffi.

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)
gorlif autoascroll

Mae safle Tooltip yn ceisio newid yn awtomatig pan fydd gan gynhwysydd rhiant overflow: autoneu'n overflow: scrollhoffi ein .table-responsive, ond mae'n dal i gadw safle'r lleoliad gwreiddiol. I ddatrys, gosodwch yr boundaryopsiwn i unrhyw beth heblaw gwerth diofyn, 'scrollParent', megis 'window':

$('#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).

Gwneud i awgrymiadau cymorth weithio ar gyfer defnyddwyr bysellfwrdd a thechnoleg gynorthwyol

Dim ond elfennau HTML sy'n draddodiadol yn canolbwyntio ar fysellfyrddau ac yn rhyngweithiol y dylech eu hychwanegu (fel dolenni neu reolaethau ffurf). <span>Er y gellir gwneud elfennau HTML mympwyol (fel s) yn ffocws trwy ychwanegu'r tabindex="0"nodwedd, bydd hyn yn ychwanegu stopiau tab a allai fod yn annifyr a dryslyd ar elfennau nad ydynt yn rhyngweithiol ar gyfer defnyddwyr bysellfwrdd, ac ar hyn o bryd nid yw'r rhan fwyaf o dechnolegau cynorthwyol yn cyhoeddi'r cyngor yn y sefyllfa hon. Yn ogystal, peidiwch â dibynnu'n llwyr arno hoverfel sbardun ar gyfer eich cyngor, gan y bydd hyn yn gwneud eich cynghorion offer yn amhosibl eu sbarduno i ddefnyddwyr bysellfwrdd.

<!-- 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="".

Sylwch, am resymau diogelwch , ni ellir darparu'r sanitize, sanitizeFnac opsiynau gan ddefnyddio priodoleddau data.whiteList

Enw Math Diofyn Disgrifiad
animeiddiad boolaidd gwir Cymhwyso trawsnewidiad pylu CSS i'r cyngor
cynhwysydd llinyn | elfen | ffug ffug

Yn atodi'r cyngor i elfen benodol. Enghraifft: container: 'body'. Mae'r opsiwn hwn yn arbennig o ddefnyddiol gan ei fod yn caniatáu ichi osod y domen offer yn llif y ddogfen ger yr elfen sbarduno - a fydd yn atal y cyngor rhag arnofio i ffwrdd o'r elfen sbarduno yn ystod newid maint ffenestr.
oedi rhif | gwrthrych 0

Oedi wrth ddangos a chuddio'r cyngor (ms) - nid yw'n berthnasol i'r math o sbardun â llaw

Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe

Strwythur gwrthrych yw:delay: { "show": 500, "hide": 100 }
html boolaidd ffug

Caniatáu HTML yn y cyngor.

Os yn wir, bydd tagiau HTML yn y cyngor yn titlecael eu rhoi yn y cyngor. Os yw'n ffug, textbydd dull jQuery yn cael ei ddefnyddio i fewnosod cynnwys yn y DOM.

Defnyddiwch destun os ydych chi'n poeni am ymosodiadau XSS.
lleoliad llinyn | swyddogaeth 'top'

Sut i leoli'r cyngor - auto | brig | gwaelod | chwith | iawn.
Pan gaiff autoei nodi, bydd yn ailgyfeirio'r cyngor yn ddeinamig.

Pan ddefnyddir swyddogaeth i benderfynu ar y lleoliad, fe'i gelwir gyda'r nod DOM cyngor offer fel ei ddadl gyntaf a'r elfen sbarduno nod DOM fel ei ail. Mae'r thiscyd-destun wedi'i osod i enghraifft y cyngor.
detholwr llinyn | ffug ffug Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig. Yn ymarferol, defnyddir hwn hefyd i gymhwyso awgrymiadau offer i elfennau DOM ( jQuery.oncymorth) a ychwanegwyd yn ddeinamig. Gweler hyn ac enghraifft llawn gwybodaeth .
templed llinyn '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Sylfaen HTML i'w ddefnyddio wrth greu'r cyngor.

Bydd y cynghorion offer yn titlecael eu chwistrellu i mewn i'r .tooltip-inner.

.arrowbydd yn dod yn saeth y cyngor.

Dylai'r elfen lapio allanol gynnwys y .tooltipdosbarth a role="tooltip".
teitl llinyn | elfen | swyddogaeth ''

Gwerth teitl diofyn os titlenad yw'r briodwedd yn bresennol.

Os rhoddir ffwythiant, fe'i gelwir gyda'i thisset gyfeirnod i'r elfen y mae'r tip offer ynghlwm wrthi.
sbardun llinyn 'ffocws hofran'

Sut mae cyngor yn cael ei sbarduno - cliciwch | hofran | ffocws | llaw. Efallai y byddwch yn pasio sbardunau lluosog; eu gwahanu â gofod.

'manual'yn nodi y bydd y cyngor yn cael ei sbarduno'n rhaglennol drwy'r .tooltip('show'), .tooltip('hide')a .tooltip('toggle')dulliau; ni ellir cyfuno'r gwerth hwn ag unrhyw sbardun arall.

'hover'ar ei ben ei hun yn arwain at awgrymiadau offer na ellir eu sbarduno trwy'r bysellfwrdd, a dim ond os oes dulliau amgen o gyfleu'r un wybodaeth i ddefnyddwyr bysellfwrdd yn bresennol y dylid eu defnyddio.
gwrthbwyso rhif | llinyn | swyddogaeth 0

Gwrthbwyso'r cyngor mewn perthynas â'i darged.

Pan ddefnyddir swyddogaeth i bennu'r gwrthbwyso, fe'i gelwir gyda gwrthrych sy'n cynnwys y data gwrthbwyso fel ei ddadl gyntaf. Rhaid i'r swyddogaeth ddychwelyd gwrthrych gyda'r un strwythur. Mae nod DOM yr elfen sbarduno yn cael ei basio fel yr ail ddadl.

Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper.js .
Lleoliad wrth gefn llinyn | arae 'fflip' Caniatewch i nodi pa safle y bydd Popper yn ei ddefnyddio wrth gefn. Am ragor o wybodaeth cyfeiriwch at ddogfennau ymddygiad Popper.js
ffin llinyn | elfen 'Sgrolio Rhiant' Ffin cyfyngiad gorlif y cyngor. Yn derbyn gwerthoedd 'viewport', 'window', 'scrollParent', neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper.js .
glanweithdra boolaidd gwir Galluogi neu analluogi'r glanweithdra. Os caiff ei actifadu 'template'a 'title'bydd yr opsiynau'n cael eu diheintio.
gwynRhestr gwrthrych Gwerth diofyn Gwrthrych sy'n cynnwys priodoleddau a thagiau a ganiateir
glanweithdraFn null | swyddogaeth null Yma gallwch gyflenwi eich swyddogaeth glanweithdra eich hun. Gall hyn fod yn ddefnyddiol os yw'n well gennych ddefnyddio llyfrgell bwrpasol i wneud glanweithdra.
popperConfig null | gwrthrych null I newid ffurfweddiad diofyn Popper.js Bootstrap, gweler cyfluniad Popper.js

Priodoleddau data ar gyfer cynghorion offer unigol

Fel arall, gellir nodi opsiynau ar gyfer cynghorion offer unigol trwy ddefnyddio priodoleddau data, fel yr eglurir uchod.

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

$().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

Math o Ddigwyddiad Disgrifiad
cyngor.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
cyngor.bs Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cyngor.cuddio.bs Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cyngor.bs.cudd Mae'r digwyddiad hwn yn cael ei danio pan fydd y cyngor wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
mewnosod.bs.tooltip Mae'r digwyddiad hwn yn cael ei danio ar ôl y show.bs.tooltipdigwyddiad pan fydd y templed cyngor wedi'i ychwanegu at y DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})