in English

Tooltips

Zvinyorwa uye mienzaniso yekuwedzera tsika yeBootstrap matipi ekushandisa neCSS neJavaScript uchishandisa CSS3 yemaanimation uye data-hunhu hwekuchengetera zita renzvimbo.

Overview

Zvinhu zvekuziva kana uchishandisa tooltip plugin:

  • Maturusi anotsamira pane yechitatu bato raibhurari Popper yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper kuitira kuti matipi ekushandisa!
  • Kana iwe uri kuvaka yedu JavaScript kubva kunobva, inodautil.js .
  • Maturusi ndeekupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
  • Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.
  • Nyora container: 'body'kudzivirira kupa matambudziko muzvikamu zvakaoma zvikuru (semapoka edu ekuisa, mapoka emabhatani, nezvimwe).
  • Kuvhura matipi ekushandisa pazvinhu zvakavanzika hazvishande.
  • .disabledMaturusi ezvishandiso kana maelement disabledanofanira kukonzereswa pachinhu chekuputira.
  • Kana yakatangwa kubva kune hyperlink inotenderera mitsetse yakawanda, matipi ezvishandiso anozoiswa pakati. Shandisa white-space: nowrap;pane yako <a>kudzivirira maitiro aya.
  • Zvishandiso zvinofanirwa kuvanzwa zvisati zvabviswa zvinhu zvinoenderana nazvo muDOM.
  • Zvishandiso zvinogona kukonzereswa nekuda kwechinhu chiri mukati memumvuri DOM.
Nekumisikidza, chikamu ichi chinoshandisa yakavakirwa-mukati sanitizer, iyo inobvisa chero zvinhu zveHTML zvisingabvumirwe zvakajeka. Ona chikamu che sanitizer mune yedu JavaScript zvinyorwa kuti uwane rumwe ruzivo.
Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Une zvese izvozvo? Zvakanaka, ngationei kuti vanoshanda sei nemimwe mienzaniso.

Muenzaniso: Gonesa matipi ekushandisa kwese kwese

Imwe nzira yekutanga matipi ezvishandiso pane peji ndeyekuvasarudza nehunhu hwavo data-toggle:

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

Mienzaniso

Hover pamusoro pemalink ari pasi apa kuti uone maturusi ekushandisa:

Ruvara rwechibatiso kuratidza mamwe mainline link ane matipi ekushandisa. Uku kwave kungozadza, hapana mhondi. Zvemukati zvakaiswa pano kungotevedzera kuvepo kwemavara chaiwo . Uye zvese izvo zvekungokupa iwe zano rekuti maturusi aizoita sei kana ashandiswa mumamiriro ezvinhu epasirese. Saka ndinovimba watoona mashandisiro anoita aya maturusi pazvinongedzo anogona kushanda mukuita, kana wangoashandisa pane yako saiti kana purojekiti.

Famba pamusoro pemabhatani ari pazasi kuti uone mana ezvishandiso nzira: kumusoro, kurudyi, pasi, uye kuruboshwe.

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

Uye netsika HTML yakawedzerwa:

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

Usage

Iyo tooltip plugin inogadzira zvirimo uye markup pane inodiwa, uye neyakagadzika nzvimbo matipi eturusi mushure meiyo trigger element.

Tamba chishandiso kuburikidza neJavaScript:

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

Tooltip chinzvimbo chinoedza kuchinja otomatiki kana mudziyo wemubereki uine overflow: autokana overflow: scrollsewedu .table-responsive, asi uchiramba wakamisikidzwa. Kugadzirisa, isa boundarysarudzo kune chero chinhu kunze kwekukosha kukosha, 'scrollParent'senge 'window':

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

Markup

Mucherechedzo unodiwa wetipi yeturusi ingori datahunhu uye titlepane HTML chinhu chaunoshuvira kuve nechokushandisa. Iyo yakagadzirwa markup yeturusitip iri nyore, kunyangwe ichida chinzvimbo (nekumisikidza, yakarongedzwa topneplugin).

Kugadzira matipi ekushandisa kune kiibhodhi uye vanobatsira tekinoroji vashandisi

Iwe unongo wedzera maturusi ezvishandiso kuHTML zvinhu zvinogara zvichitariswa kiibhodhi-inotariswa uye inopindirana (senge zvinongedzo kana mafomu ekudzora). Kunyangwe zvinopokana zveHTML zvinhu ( <span>senge s) zvichigona kuitwa kuti zvitarisike nekuwedzera tabindex="0"hunhu, izvi zvinowedzera zvinogona kutsamwisa uye zvinovhiringa tebhu inomira pazvinhu zvisiri-zvinopindirana zvevashandisi vekhibhodi, uye matekinoroji mazhinji anobatsira parizvino haazivise chishandiso mune ino mamiriro. Pamusoro pezvo, usavimbe nayo chete hoversechinhu chinokonzeresa chetipi chako chekushandisa, sezvo izvi zvichizoita kuti matipi ako asaite kukonzeresa vashandisi vekhibhodi.

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

Zvinhu zvakaremara

Zvinhu zvine disabledhunhu hazvidyidzane, zvichireva kuti vashandisi havagone kutarisa, kutenderedza, kana kudzvanya kuti vatange chishandiso (kana popover). Sechishandiso, iwe unozoda kukonzeresa chishandiso kubva pakuputira <div>kana <span>, yakanyatsogadzirwa keyboard-inotariswa uchishandisa tabindex="0", uye kupfuudza iyo pointer-eventspane yakaremara chinhu.

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-animation="".

Ziva kuti nekuda kwezvikonzero zvekuchengetedza iyo sanitize, sanitizeFnuye whiteListsarudzo haigone kupihwa uchishandisa data hunhu.
Zita Type Default Tsanangudzo
animation boolean chokwadi Isa CSS fade shanduko kune tooltip
mudziyo tambo | chinhu | nhema nhema

Inoisa tip kune chimwe chinhu. Muenzaniso container: 'body':. Iyi sarudzo inonyanya kubatsira nekuti inokutendera iwe kuti uise iyo yetip mukufamba kwegwaro padyo nechinhu chinokonzeresa - izvo zvinodzivirira iyo tooltip kuti isayangarara kubva kune inokonzeresa chinhu panguva yehwindo resize.
delay nhamba | object 0

Kunonoka kuratidza uye kuvanza iyo tooltip (ms) - haishande kune manual trigger type

Kana nhamba yapihwa, kunonoka kunoiswa kune ese ari maviri hide/show

Chimiro chechinhu ndeichi:delay: { "show": 500, "hide": 100 }
html boolean nhema

Bvumira HTML muchokushandisa.

Kana chiri chokwadi, ma tag eHTML ari mutooltip titleanozopihwa mutooltip. Kana nhema, nzira yejQuery textichashandiswa kuisa zvirimo muDOM.

Shandisa zvinyorwa kana uchinetseka nezve XSS kurwiswa.
kuiswa tambo | basa 'pamusoro'

Maitiro ekuisa iyo tooltip - auto | pamusoro | pasi | left | rudyi.
Kana autoyatsanangurwa, ichaita dynamically reoring the tooltip.

Kana basa rikashandiswa kuona kuiswa, rinodanwa neturusipi DOM node senharo yayo yekutanga uye chinokonzeresa chinhu DOM node sechipiri. Mamiriro thisacho akaiswa kumuenzaniso wetipi.
selector tambo | nhema nhema Kana sarudzo yakapihwa, zviro zveturusi zvinopihwa kune izvo zvakatarwa. Mukuita, izvi zvinoshandiswa kushandisawo matipi ekushandisa kune zvine simba akawedzera DOM zvinhu ( jQuery.onrutsigiro). Ona izvi uye muenzaniso unodzidzisa .
template tambo '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML yekushandisa paunenge uchigadzira iyo tooltip.

The tooltip's titleichabaiwa mu .tooltip-inner.

.arrowrichava museve wepfuti.

Iyo yekunze wrapper element inofanirwa kuve .tooltipnekirasi uye role="tooltip".
title tambo | chinhu | basa ''

Default title value kana titlehunhu husipo.

Kana basa rapihwa, rinodaidzwa nereferensi yaro thisyakaiswa kune chinhu icho chishandiso chakanamirwa pachiri.
trigger tambo 'hover focus'

Maturusi ekushandisa anokonzereswa sei - tinya | hovha | focus | manual. Unogona kupfuura akawanda anokonzeresa; vaparadzanise nenzvimbo.

'manual'inoratidza kuti chishandiso chinokonzereswa nehurongwa kuburikidza ne .tooltip('show'), .tooltip('hide')uye .tooltip('toggle')nzira; kukosha uku hakugone kusanganiswa nechimwe chinokonzeresa.

'hover'pachezvayo zvinozoguma nematurusi ezvishandiso asingakwanise kuvhurwa kuburikidza nekhibhodi, uye anofanirwa kushandiswa chete kana dzimwe nzira dzekuburitsa ruzivo rwakafanana kune vashandisi vekhibhodi iripo.
offset nhamba | tambo | basa 0

Offset yetip yezvishandiso inoenderana nechinangwa chayo.

Kana basa rikashandiswa kuona chinobvisa, chinodaidzwa nechinhu chine data rekubvisa senharo yayo yekutanga. Basa racho rinofanira kudzorera chinhu chine chimiro chakafanana. Iyo inokonzeresa element DOM node inopfuudzwa seyechipiri nharo.

Kuti uwane rumwe ruzivo tarisa kuPopper's offset docs .
fallbackPlacement tambo | array 'pindurudza' Bvumira kudoma chinzvimbo chichashandiswa naPopper pakudonha. Kuti uwane rumwe ruzivo tarisa kuPopper's behaviour docs
customClass tambo | basa ''

Wedzera makirasi kune chishandiso kana charatidzwa. Ziva kuti makirasi aya achawedzerwa kune chero makirasi anotsanangurwa mutemplate. Kuwedzera makirasi akawanda, aparadzanise nenzvimbo: 'a b'.

Iwe unogona zvakare kupasa basa rinofanira kudzosa tambo imwe ine mamwe mazita ekirasi.
muganhu tambo | element 'scrollParent' Kufashukira kuganhurirwa kwechishandiso. Inobvuma kukosha kwe 'viewport', 'window', 'scrollParent', kana HTMLElement referensi (JavaScript chete). Kuti uwane rumwe ruzivo tarisa kune Popper's preventOverflow docs .
sanitize boolean chokwadi Gonesa kana kudzima sanitization. Kana yakagadziriswa 'template'uye 'title'sarudzo dzichaitwa sanitized. Ona chikamu che sanitizer mune yedu JavaScript zvinyorwa .
whiteList object Default value Chinhu chine hunhu uye ma tag anotenderwa
sanitizeFn null | basa null Pano iwe unogona kupa yako wega sanitize basa. Izvi zvinogona kubatsira kana ukada kushandisa raibhurari yakatsaurirwa kuita sanitization.
popperConfig null | object null Kuti uchinje Bootstrap's default Popper config, ona Popper's kumisikidza

Data maitiro kune ega ega ekushandisa

Sarudzo dzematurusi ega ega dzinogona kutsanangurwa neimwe nzira kuburikidza nekushandisa data hunhu, sezvatsanangurwa pamusoro.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

$().tooltip(options)

Inonamira chibatiso cheturusi kune muunganidzwa wezvinhu.

.tooltip('show')

Inoratidza chekushandisa chechinhu. Inodzokera kumunhu arikufona tip rekushandisa risati ranyatsoratidzwa (kureva kuti shown.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip. Zvishandiso zvine mazita akareba zero hazvimbotaridzwa.

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

.tooltip('hide')

Inovanza zano rekushandisa. Inodzokera kune ari kufona chitupa chisati chavanzwa (kureva kuti hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

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

.tooltip('toggle')

Inoshandura matipi echinhu. Inodzokera kumunhu arikufona tip rekushandisa risati raratidzwa kana kuvanzwa (kureva kuti shown.bs.tooltipkana hidden.bs.tooltipchiitiko chisati chaitika). Izvi zvinoonekwa se "manual" inokonzeresa yeturusitip.

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

.tooltip('dispose')

Inoviga nekuparadza mudziyo wekushandisa. Zvishandiso zvinoshandisa kugovera (zvinogadzirwa pachishandiswa sarudzoselector ) hazvingaparadzwi pachega pazvikamu zvinokonzeresa zvedzinza .

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

.tooltip('enable')

Inopa chekushandisa chechinhu kugona kuratidzwa. Zvishandiso zvinogoneswa nekusarudzika.

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

.tooltip('disable')

Inobvisa kugona kwetip yechinhu kuti iratidzwe. Iyo tooltip inongokwanisa kuratidzwa kana yakabatidzwa zvakare.

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

.tooltip('toggleEnabled')

Inoshandura kugona kwetip yechinhu kuti ionekwe kana kuvanzwa.

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

.tooltip('update')

Inovandudza nzvimbo yetip yechinhu.

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

Zviitiko

Chiitiko Type Tsanangudzo
show.bs.tooltip Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
display.bs.tooltip Chiitiko ichi chinodzingwa kana chishandiso chaitwa kuti chionekwe kumushandisi (chinomirira kuti CSS shanduko ipedze).
hide.bs.tooltip Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
zvakavanzika.bs.tooltip Chiitiko ichi chinodzingwa kana chishandiso chapedza kuvanzwa kubva kumushandisi (chinomirira kuti CSS shanduko ipedze).
inserted.bs.tooltip Chiitiko ichi chinodzingwa mushure show.bs.tooltipmechiitiko apo template yekushandisa yawedzerwa kuDOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})