Source

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.

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 'ne tsa lisebelisoa: holimo, ho le letona, tlase le 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 ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka JavaScript:

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

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

U 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 litsamaiso tsa foromo). Le hoja likarolo tsa HTML tse sa lumellaneng (tse kang <span>s) li ka etsoa hore li shebahale hantle ka ho kenyelletsa tabindex="0"tšobotsi, sena se tla eketsa li-tab tse ka 'nang tsa khopisa le tse ferekanyang linthong tse sa sebetsanang le basebelisi ba keyboard. Ho feta moo, litheknoloji tse ngata tse thusang hajoale ha li 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

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

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 nolofalletsa litaba tsa HTML tse matla hore li eketsoe ke popover. 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 - tobetsa | 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 0 Offset ea lisebelisoa tse amanang le sepheo sa eona. 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 .

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