Source

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.js yekumisikidza . Unofanira kusanganisira popper.min.js pamberi bootstrap.js kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper.js kuitira kuti tooltips kushanda!
  • 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.

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:

Tight bhurugwa next level keffiyeh pamwe hausati wanzwa nezvavo. Photo booth ndebvu mbishi denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american nguo ine terry richardson vinyl chambray. Ndebvu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, mana loko mcsweeney's cleanse vegan chambray. A really artisan artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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) zvinogona kuitwa kuti zvitarisike nekuwedzera tabindex="0"hunhu, izvi zvinowedzera zvinogona kutsamwisa uye kuvhiringa tebhu inomira pazvinhu zvisiri-zvinopindirana zvevashandisi vekhibhodi. Pamusoro pezvo, matekinoroji mazhinji ekubatsira parizvino haazivise chitupa 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="".

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 0 Offset yetip yezvishandiso inoenderana nechinangwa chayo. Kuti uwane rumwe ruzivo tarisa kuPopper.js's offset docs .
fallbackPlacement tambo | array 'pindurudza' Bvumira kudoma chinzvimbo chichashandiswa naPopper pakudonha. Kuti uwane rumwe ruzivo tarisa kune Popper.js's maitiro docs
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.js's preventOverflow docs .

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…
})