Source

Tilmaamaha Qalabka

Dukumeenti iyo tusaaleyaal lagu daro qalabka Bootstrap ee gaarka ah CSS iyo JavaScript iyadoo la adeegsanayo CSS3 animations iyo xogta sifada kaydinta cinwaanka maxalliga ah.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo Tooltip plugin:

  • Tilmaamaha qalabku waxay ku tiirsan yihiin maktabadda kooxda 3aad Popper.js meelaynta. Waa in aad ku darto popper.min.js ka hor bootstrap.js ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper.js si qalabku u shaqeeyo!
  • Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
  • Tilmaamaha aaladaha ayaa loo gatay sababo waxqabad dartood, marka waa inaad adigu bilowdaa .
  • Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.
  • Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
  • Qalab kicinta walxaha qarsoon ma shaqayn doonaan.
  • Tilmaamaha aaladaha .disabledama disabledwalxaha waa in lagu kiciyaa curiyaha duubka ah.
  • Marka laga soo kiciyo hyperlinks kuwaas oo fidsan xariiqyo badan, tabaha aaladaha ayaa udub dhexaad u noqon doona. Isticmaal s si white-space: nowrap;aad <a>uga fogaato dhaqankan.
  • Tilmaamaha qalabka waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
  • Tilmaamaha aaladaha waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Waxaas oo dhan ma heshay? Way fiicantahay, aan aragno sida ay ula shaqeeyaan tusaalooyinka qaar.

Tusaale: Dari tilmaanta aaladaha meel kasta

Hal dariiqo oo lagu bilaabi karo dhammaan qalabyada bogga waxay noqon kartaa in lagu xusho data-togglesifadooda:

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

Tusaalooyinka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

Surwaal dhagan keffiyeh malaha maadan maqlin iyaga. Photo booth gadhka cayriin denim warqad-press vegan messenger bag stumptown. Beer-ilaa-miiska seitan, mcsweeney's fixie sustainable quinoa 8-bit dharka maraykanku waxay leeyihiin terry Richardson vinyl chambray. Gadhka stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, afar loko mcsweeney's chambray vegan nadiif ah. Farsamoyaqaan dhab ah oo biro ah wax kasta oo keytar , scenester farm-to-table banksy Austin twitter handle freegan cred denim ceeriin hal-asalka kafeega viral.

Dul bood badhamada hoose si aad u aragto afarta tilmaamood ee tilmaamaha: sare, midig, hoose, iyo bidix.

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

Iyo HTML caadadii lagu daray:

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

Isticmaalka

Plugin-ka Tooltip wuxuu soo saaraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah wuxuu meeleeyaa tilmaamo qalab ka dib cunsurkooda kiciya.

Ku kiciya tilmaanta aalada JavaScript:

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

Booska qalabku wuxuu isku dayaa inuu si toos ah u bedelo marka weelka waalidku haysto overflow: autoama overflow: scrolljecel yahay .table-responsive, laakiin wali wuxuu hayaa meelaynta asalka ah. Si loo xalliyo, u deji boundaryikhtiyaarka wax kasta oo aan ahayn qiimaha caadiga ah, 'scrollParent'sida 'window':

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

Calaamadayn

Calaamadaynta loo baahan yahay ee qalab-tireedku waa datasifo kaliya oo titleqaybta HTML ee aad rabto inaad haysato qalab. Astaanta la soo saaray ee tilmaanta qalabku waa mid fudud, in kasta oo ay u baahan tahay boos (sida caadiga ah, oo loo dejiyay topplugin).

Samaynta tibaaxaha aaladaha u shaqeeya kiiboodhka iyo isticmaalayaasha tignoolajiyada caawiya

Waa inaad ku darto oo kaliya qalabyada curiyayaasha HTML kuwaas oo dhaqan ahaan kiiboodhka diirada saaraya iyo is dhexgal (sida isku xidhka ama kontaroolada foomka). In kasta oo canaasirta HTML-ka ah (sida <span>s) laga dhigi karo mid diiradda lagu saari karo iyadoo lagu darayo sifada tabindex="0", tani waxay ku dari doontaa joogsiga tab ee laga yaabo inay dhibsadaan iyo jahawareer ku ah walxaha aan is dhexgalka lahayn ee isticmaalayaasha kiiboodhka. Intaa waxaa dheer, inta badan tignoolajiyada caawinta hadda kuma dhawaaqaan tilmaanta qalabka xaaladdan.

Intaa waxaa dheer, ha isku hallayn oo kaliya hoverinay tahay kiciye aaladdaada, maxaa yeelay tani waxay ka dhigaysaa aaladahaaga mid aan macquul ahayn inay kiciyaan isticmaaleyaasha kiiboodhka.

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

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay diiradda saari karin, kor u qaadi karin, ama aanay gujin karin si ay u kiciyaan qalab (ama popover). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso qalabka wax lagu duubo <div>ama <span>, sida habboon loo sameeyay kiiboodhka diirada saaraya tabindex="0", oo aad ka gudubto pointer-eventsqaybta naafada ah.

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan run Codso u gudbida libdhicida CSS ilaa aaladda
weel xadhig | element | been ah been ah

Waxay ku dhejisaa caarada aaladda shay gaar ah. Tusaale container: 'body':. Doorashadani waxa ay si gaar ah faa'iido u leedahay in ay kuu ogolaato in aad dhigto tip-tip-ka ee socodka dhokumentiga ee u dhow curiyaha kiciya - kaas oo ka ilaalin doona in qalabku ka sabbeeyo walxaha kiciya inta lagu jiro cabbirka daaqada.
dib u dhac lambarka | walax 0

Daahinta muujinta iyo qarinta aaladda (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { "show": 500, "hide": 100 }
html booliyan been ah

Oggolow HTML in uu ku jiro tibaaxaha.

Haddi ay run tahay, HTML tags in tooltip's titlewaxaa lagu soo bandhigayaa qalab tip. Haddii ay been tahay, texthabka jQuery ayaa loo isticmaali doonaa in la geliyo macluumaadka DOM.

Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn 'sare'

Sida loo dhigo tip-tip - auto | sare | hoose | bidix | xaq.
Marka autola cayimo, waxay si firfircoon dib u habayn doontaa tibaaxaha qalabka.

Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxa loogu yeedhaa qalabka DOM node oo ah doodiisa koowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha thisguud waxa loo dejiyay tusaalaha tibaaxaha.
dooriye xadhig | been ah been ah Haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa sidoo kale loo isticmaalaa in lagu dabaqo aaladaha aaladaha si firfircoon loogu daray walxaha DOM ( jQuery.ontaageerada). Bal tan iyo tusaale wargelin ah eeg .
template xadhig '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Saldhig HTML si aad u isticmaasho marka la abuurayo tip-ka.

Tilmaamaha qalabka titleayaa lagu duri doonaa .tooltip-inner.

.arrowwaxa ay noqon doontaa fallaadho tibta aalada.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .tooltipfasalka iyo role="tooltip".
horyaalka xadhig | element | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha ay tip-ku ku dheggan tahay.
kicin xadhig 'fiirsashada dulsaarka'

Sida aaladda loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; meel bannaan ku kala saar.

'manual'waxay tusinaysaa in tibaaxaha qalabka lagu kicin doono barnaamij ahaan iyada oo loo marayo .tooltip('show'), .tooltip('hide')iyo .tooltip('toggle')hababka; Qiimahan laguma dari karo kiciye kale.

'hover'Keligeed waxay keenaysaa tilmaamo aan lagu kicin karin kiiboodhka, waana in la isticmaalo oo keliya haddii habab kale oo loogu gudbinayo isla macluumaadka isticmaalayaasha kiiboodhka ay jiraan.
dhimis lambarka | xadhig 0 Deminta tibaaxaha qalabka marka loo eego bartilmaameedkiisa. Wixii macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper.js .
fallbackPlacement xadhig | diyaarin 'rogid' Oggolow inuu caddeeyo booska Popper uu isticmaali doono dib-u-dhaca. Wixii macluumaad dheeraad ah tixraac dukumeentiyada dabeecadda Popper.js
xuduud xadhig | curiye 'waalidiinta' Xadka xad-dhaafka ah ee xaddidaadda qalabka. Aqbala qiyamka 'viewport', 'window', 'scrollParent', ama tixraaca HTMLElement (JavaScript kaliya). Macluumaad intaas ka badan ka eeg dukumeentiyada Popper.js ee ka hortagga qulqulka .

Sifooyinka xogta ee aaladaha gaarka ah

Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta, sida kor lagu sharaxay.

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla marka uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

$().tooltip(options)

Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.

.tooltip('show')

Waxay daaha ka qaadaysaa aaladda curiyaha Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin (tusaale ka hor intaanay shown.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.

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

.tooltip('hide')

Wuxuu qariyaa calaamadda curiyaha. Ku soo noqda qofka soo wacay ka hor inta aan la qarin qalabka wax lagu qoro (tusaale ka hor intaanay hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

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

.tooltip('toggle')

Beddelayaa shay raadka. Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.tooltipama hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa “handual” kicinta qalabka.

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

.tooltip('dispose')

Qariyaa oo baabi'iyaa aaladda curiyaha. Aaladaha adeegsada ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

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

.tooltip('enable')

Waxay siisaa aalada curiyaha awoodda lagu tuso. Tilmaamaha qalabku waa la dajiyay.

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

.tooltip('disable')

Waxay meesha ka saartaa awoodda qalabka curiyaha in la muujiyo. Qalabka tilmaanta waxa la tusi karaa oo keliya haddii dib loo hawlgeliyo.

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

.tooltip('toggleEnabled')

Waxay beddeshaa awoodda aaladda curiyaha si loo muujiyo ama loo qariyo.

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

.tooltip('update')

Waxay cusboonaysiisaa booska tibaaxaha curiyaha.

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

Dhacdooyinka

Nooca Dhacdada Sharaxaada
show.bs.tooltip Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
tusay.bs.tooltip Dhacdadan waxa la eryaa marka tip-tip-ka loo dhigay mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
qari.bs.tooltip Dhacdadan ayaa isla markiiba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.tooltip Dhacdadan waxa la eryaa marka qalabku dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
la geliyey.bs.tooltip Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.tooltipmarka qaabka qalabaynta lagu daro DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})