in English

Lisebelisoa

Litokomane le mehlala ea ho eketsa lisebelisoa tsa lisebelisoa tsa Bootstrap ka CSS le JavaScript u sebelisa CSS3 bakeng sa lipopae le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea tooltip:

  • Litlhahiso li itšetlehile ka laeborari ea batho ba boraro ea Popper.js bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper.js e le hore lisebelisoa tsa lisebelisoa li sebetse!
  • Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .
  • Litlhahiso ke tsa ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
  • Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.
  • Hlakisa container: 'body'ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo).
  • Ho kenya lisebelisoa ho lisebelisoa tse patiloeng ho ke ke ha sebetsa.
  • Lisebelisoa tsa lisebelisoa .disabledkapa disabledlikarolo li tlameha ho hlahisoa holim'a karolo ea wrapper.
  • Ha e hlahisoa ho tsoa ho li-hyperlink tse nang le mela e mengata, lisebelisoa tsa lisebelisoa li tla ba teng. Sebelisa white-space: nowrap;ho hao <a>ho qoba boitšoaro bona.
  • Lisebelisoa li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
  • Lisebelisoa li ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

O nale tseo tsohle? E kholo, a re boneng hore na ba sebetsa joang ka mehlala e meng.

Mohlala: Lumella lithulusi hohle

Tsela e 'ngoe ea ho qala lisebelisoa tsohle tse leqepheng e tla ba ho li khetha ka data-toggletšobotsi ea tsona:

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

Mehlala

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

Borikhoe bo thata bo latelang keffiyeh mohlomong ha u so utloe ka bona. Photo booth litelu tse tala tsa denim letterpress vegan messenger bag stumptown. Seaparo sa polasi-to-tafola seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparse e na le terry richardson vinyl chambray. Litelu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Tsamaea holim'a likonopo tse ka tlase ho bona litsela tse 'nè tsa lisebelisoa: holimo, ho le letona, tlase, le ho le letšehali.

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

'Me ka HTML e tloaelehileng e ekelitsoe:

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

Tšebeliso

plugin ea tooltip e hlahisa litaba le markup ho latela tlhoko, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka JavaScript:

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

Sebaka sa Tooltip se leka ho fetoha ha sesebelisoa sa motsoali se rata overflow: autokapa se overflow: scrollrata .table-responsive, empa se ntse se boloka boemo ba sebaka sa pele. Ho rarolla, beha boundarykhetho ho eng kapa eng ntle le boleng ba kamehla 'scrollParent', joalo ka 'window':

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

Markup

Letšoao le hlokahalang bakeng sa sesebelisoa ke datatšobotsi feela 'me titleho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng topke plugin).

Ho etsa hore malebela a lithulusi a sebetse ho keyboard le basebelisi ba theknoloji e thusang

O lokela ho kenya feela malebela a lisebelisoa ho likarolo tsa HTML tseo ka tloaelo li shebaneng le keyboard le ho sebelisana (joalo ka likhokahano kapa taolo ea liforomo). Leha likarolo tsa HTML tse sa reroang (tse kang <span>s) li ka tsepamisoa maikutlo ka ho eketsa tabindex="0"tšobotsi, sena se tla eketsa litopo tse ka bang tsa khopisa le tse ferekanyang linthong tse sa sebelisaneng bakeng sa basebelisi ba keyboard, 'me mahlale a mangata a thusang hajoale ha a phatlalatse sesebelisoa boemong bona. Ho phaella moo, u se ke ua itšetleha feela ka hoverhore e be mohloli oa lisebelisoa tsa hau, kaha sena se tla etsa hore lisebelisoa tsa hau tsa lisebelisoa li se ke tsa khoneha bakeng sa basebelisi ba keyboard.

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

Lintho tse holofetseng

Lintho tse nang le disabledtšobotsi ha li sebelisane, ho bolelang hore basebelisi ha ba khone ho tsepamisa maikutlo, ho ōka, kapa ho li tobetsa ho kenya lisebelisoa (kapa popover). Joalo ka mokhoa oa ho sebetsa, o tla batla ho qala sesebelisoa ho tsoa ho sekoaelo <div>kapa <span>, ka mokhoa o nepahetseng o etse hore keyboard e tsepamise maikutlo ho sebelisa tabindex="0", 'me u kenye pointer-eventsholim'a ntho e holofetseng.

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Hlokomela hore ka mabaka a ts'ireletso sanitize, sanitizeFnle whiteListlikhetho li ke ke tsa fanoa ho sebelisoa litšobotsi tsa data.

Lebitso Mofuta Ea kamehla Tlhaloso
animation boolean 'nete Kenya phetoho ea CSS fade ho tooltip
setshelo khoele | ntho | bohata bohata

E kopanya ntlha ea lisebelisoa ho ntho e itseng. Mohlala container: 'body':. Khetho ena e na le thuso ka ho khetheha hobane e u lumella ho beha sesebelisoa ho phallo ea tokomane haufi le ntho e qalang - e tla thibela sesebelisoa hore se se ke sa phaphamala ho tloha nthong e qalang nakong ea ho fetola boholo ba fensetere.
lieha nomoro | ntho 0

Ho lieha ho bonts'a le ho pata ntlha ea lisebelisoa (ms) - ha e sebetse mofuteng oa ho kenya letsoho

Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli

Sebopeho sa ntho ke:delay: { "show": 500, "hide": 100 }
html boolean bohata

Lumella HTML karolong ea lisebelisoa.

Haeba ke 'nete, li-tag tsa HTML tse karolong ea lisebelisoa li titletla hlahisoa karolong ea lisebelisoa. Haeba e le leshano, mokhoa oa jQuery texto tla sebelisoa ho kenya litaba ho DOM.

Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha khoele | tshebetso 'holimo'

Mokhoa oa ho beha sesebelisoa - auto | holimo | tlase | le letšehali | hantle.
Ha autoe se e hlalositsoe, e tla fetola sebopeho sa tooltip.

Ha ts'ebetso e sebelisoa ho fumana hore na e behiloe hokae, e bitsoa ka node ea DOM e nang le "tooltip" e le khang ea eona ea pele, 'me karolo e qalang ea DOM e le ea bobeli. Moelelo thiso behiloe ho mohlala oa lisebelisoa.
mokhethi khoele | bohata bohata Haeba ho fanoe ka sekhetho, lintlha tsa lisebelisoa li tla abeloa lipehelo tse boletsoeng. Ha e le hantle, sena se sebelisetsoa ho sebelisa lisebelisoa tsa lisebelisoa ho likarolo tsa DOM tse ekelitsoeng ka matla ( jQuery.onts'ehetso). Bona sena le mohlala o rutang .
template khoele '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML ea mantlha eo u ka e sebelisang ha u theha sesebelisoa.

The tooltip's titlee tla kenngoa ka har'a .tooltip-inner.

.arrowe tla fetoha motsu oa sesebelisoa.

Karolo e ka ntle ea wrapper e lokela ho ba le .tooltipsehlopha le role="tooltip".
sehlooho khoele | ntho | tshebetso ''

Boleng ba sehlooho sa kamehla haeba titlesemelo se le sieo.

Haeba mosebetsi o fanoe, o tla bitsoa ka thislitšupiso tsa oona ho element eo ntlha ea lisebelisoa e hokeletsoeng ho eona.
qhoqhoa khoele 'hover focus'

Mokhoa oa lisebelisoa o qala joang - tlanya | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka.

'manual'e bontša hore sesebelisoa se tla qalisoa ka mokhoa oa lenaneo ka .tooltip('show'), .tooltip('hide')le .tooltip('toggle')mekhoa; boleng bona bo ke ke ba kopanngoa le sesosa leha e le sefe se seng.

'hover'ka bohona ho tla fella ka malebela a lithulusi a ke keng a hlahisoa ka keyboard, 'me a lokela ho sebelisoa feela haeba mekhoa e meng ea ho fetisa tlhahisoleseling e tšoanang bakeng sa basebelisi ba keyboard e le teng.
offset nomoro | khoele | tshebetso 0

Offset ea lisebelisoa tse amanang le sepheo sa eona.

Ha ts'ebetso e sebelisoa ho khetholla offset, e bitsoa ka ntho e nang le data ea offset e le khang ea eona ea pele. Mosebetsi o tlameha ho khutlisa ntho e nang le sebopeho se ts'oanang. The triggering element DOM node e fetisoa e le khang ea bobeli.

Ho fumana lintlha tse ling, sheba ho Popper.js's offset docs .
fallbackPlacement khoele | array 'phetla' Lumella ho hlakisa hore na Popper e tla sebelisa boemo bofe ha ho khutla. Ho fumana lintlha tse ling, sheba ho Popper.js's behaviour docs
moeli khoele | element 'scrollParent' Moeli oa litšitiso tse fetelletseng oa sesebelisoa. E amohela boleng ba 'viewport', 'window', 'scrollParent', kapa HTMLElement reference (JavaScript feela). Ho fumana lintlha tse ling, sheba ho Popper.js's preventOverflow docs .
sanitize boolean 'nete Lumella kapa o tima tsamaiso ea sanitization. Haeba e kentsoe 'template''me 'title'likhetho li tla hloekisoa.
whiteList ntho Boleng ba kamehla Ntho e nang le litšobotsi le li-tag tse lumelletsoeng
hloekisaFn null | tshebetso lefeela Mona o ka fana ka ts'ebetso ea hau ea sanitize. Sena se ka ba molemo haeba u khetha ho sebelisa laebrari e inehetseng ho etsa bohloeki.
popperConfig null | ntho lefeela Ho fetola tlhophiso ea kamehla ea Bootstrap ea Popper.js, bona tlhophiso ea Popper.js

Litšobotsi tsa data bakeng sa lisebelisoa tsa motho ka mong

Likhetho tsa lisebelisoa tsa motho ka mong li ka hlalosoa ka tšebeliso ea lintlha, joalo ka ha ho hlalositsoe ka holimo.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

$().tooltip(options)

E hokela sebatli sa lithulusi pokellong ea lintho.

.tooltip('show')

E senola karolo ea lisebelisoa. E kgutlela ho moletsi pele thulusi e bontshwa (ke hore pele shown.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa. Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

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

.tooltip('hide')

E pata ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se patiloe (ke hore pele hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('toggle')

E fetola ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se bontšoa kapa se patiloe (ke hore pele ketsahalo shown.bs.tooltipkapa hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('dispose')

E pata le ho senya ntlha ea lisebelisoa. Litlhahiso tse sebelisang kemiso (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe holima lintho tse qalang.

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

.tooltip('enable')

E fa ntlha ea lisebelisoa bokhoni ba ho bonts'a. Litlhahiso tsa lisebelisoa li lumelloa ka mokhoa oa kamehla.

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

.tooltip('disable')

E tlosa bokhoni ba ho hlahisa lisebelisoa tsa element. The tooltip e tla khona ho bonts'oa ha feela e buletsoe hape.

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

.tooltip('toggleEnabled')

E fetola bokhoni ba lisebelisoa tsa element hore li bontšoe kapa li patehe.

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

.tooltip('update')

E kaonefatsa boemo ba ntlha ea lisebelisoa.

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

Liketsahalo

Mofuta oa Ketsahalo Tlhaloso
bonts'a.bs.tooltip Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
bontshiweng.bs.tooltip Ketsahalo ena e ts'oaroa ha sesebelisoa sa lisebelisoa se bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs.tooltip Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng.bs.tooltip Ketsahalo ena e ts'oaroa ha sesebelisoa se qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
kenya.bs.tooltip Ketsahalo ena e lelekoa ka mor'a show.bs.tooltipketsahalo ea ha thempleite ea tooltip e kentsoe ho DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})