Source

Malangizo

Zolemba ndi zitsanzo zowonjezerera zida za Bootstrap ndi CSS ndi JavaScript pogwiritsa ntchito CSS3 pa makanema ojambula pamanja ndi mawonekedwe a data posungira mitu yanu.

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu yowonjezera:

  • Zida zimadalira laibulale ya gulu lachitatu Popper.js kuti ikhazikike. Muyenera kuphatikiza popper.min.js pamaso pa bootstrap.js kapena gwiritsani ntchito bootstrap.bundle.min.js/ bootstrap.bundle.jsyomwe ili ndi Popper.js kuti zida zigwire ntchito!
  • Ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js .
  • Zida ndizolowera pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
  • Zida zokhala ndi mitu zazitali sizimawonetsedwa.
  • Nenani container: 'body'kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina).
  • Kuyambitsa zida zazinthu zobisika sikungagwire ntchito.
  • Zida .disabledkapena disabledzinthu ziyenera kuyambitsidwa pa chinthu chokulunga.
  • Zikayambika kuchokera ku ma hyperlink omwe amatambasula mizere ingapo, nsonga za zida zidzakhazikika. Gwiritsani white-space: nowrap;ntchito zanu <a>kuti mupewe izi.
  • Zida ziyenera kubisika zisanachotsedwe mu DOM.
  • Zida zitha kuyambika chifukwa cha chinthu chomwe chili mkati mwa mthunzi wa DOM.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Muli nazo zonse? Chabwino, tiyeni tiwone momwe amagwirira ntchito ndi zitsanzo zina.

Chitsanzo: Yambitsani zida kulikonse

Njira imodzi yokhazikitsira zida zonse patsamba ingakhale yosankha malinga ndi zomwe ali nazo data-toggle:

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

Zitsanzo

Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:

mathalauza olimba next level keffiyeh mwina simunamvepo. Photo booth ndevu za denim yaiwisi letterpress vegan messenger bag stumptown. Zovala za Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american zovala zili ndi terry richardson vinyl chambray. Ndevu stumptown, ma cardigans banh mi lomo mabingu. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really artisan artisan whatever keytar , malo owoneka bwino a famu-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Yendani pamwamba pa mabatani omwe ali pansipa kuti muwone njira zinayi zazida: pamwamba, kumanja, pansi, ndi kumanzere.

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

Ndipo ndi HTML yachizolowezi yowonjezedwa:

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

Kugwiritsa ntchito

Pulogalamu yowonjezera ya tooltip imapanga zokhutira ndi zolembera zomwe zimafunidwa, ndipo mwachisawawa zimayika zida pambuyo pa zomwe zimayambitsa.

Yambitsani chida kudzera pa JavaScript:

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

Malo a Tooltip amayesa kusintha okha ngati chotengera cha makolo chili nacho overflow: autokapena overflow: scrollngati makonda athu .table-responsive, komabe chimasunga malo omwe adayikapo. Kuti muthetse, ikani boundarychisankho ku china chilichonse kupatula mtengo wokhazikika, 'scrollParent'monga 'window':

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

Markup

Cholembera chofunikira pa chida ndi mawonekedwe chabe datandipo titlepa chinthu cha HTML mukufuna kukhala ndi chida. Zolemba zopangira zida ndizosavuta, ngakhale zimafunikira malo (mwachisawawa, zokhazikitsidwa topndi pulogalamu yowonjezera).

Kupanga zida zothandizira ogwiritsa ntchito kiyibodi ndi ukadaulo wothandizira

Muyenera kungowonjezera zida kuzinthu za HTML zomwe nthawi zambiri zimakhala zolunjika pa kiyibodi komanso zolumikizana (monga maulalo kapena zowongolera mawonekedwe). Ngakhale zinthu zosasintha za HTML (monga <span>s) zitha kukhala zowoneka bwino powonjezera mawonekedwe tabindex="0", izi zitha kuwonjezera zokhumudwitsa komanso zosokoneza pa zinthu zomwe sizimalumikizana ndi ogwiritsa ntchito kiyibodi, ndipo matekinoloje ambiri othandizira pakadali pano salengeza zachida ichi. Kuphatikiza apo, musamangodalira hoverngati choyambitsa chida chanu, chifukwa izi zipangitsa kuti zida zanu zikhale zosatheka kuyambitsa ogwiritsa ntchito kiyibodi.

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

Zinthu zolemala

Zinthu zomwe zili ndi mawonekedwe disabledake sizimayenderana, kutanthauza kuti ogwiritsa ntchito sangathe kuyang'ana, kuyang'ana pamwamba, kapena kuzidina kuti ayambitse chida (kapena popover). Monga njira yogwirira ntchito, mudzafuna kuyambitsa chida kuchokera pachimake <div>kapena <span>, chopangidwa kuti chikhale chokhazikika pogwiritsa ntchito kiyibodi tabindex="0", ndikupitilira zomwe pointer-eventszili olumala.

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-animation="".

Dziwani kuti pazifukwa zachitetezo sanitize, sanitizeFnndi whiteListzosankha sizingaperekedwe pogwiritsa ntchito mawonekedwe a data.

Dzina Mtundu Zosasintha Kufotokozera
makanema ojambula boolean zoona Ikani kusintha kwa CSS pazida
chotengera chingwe | chinthu | zabodza zabodza

Imawonjezera chida ku chinthu china. Chitsanzo: container: 'body'. Njirayi ndiyothandiza kwambiri chifukwa imakulolani kuti muyike chidacho pakuyenda kwa chikalatacho pafupi ndi chinthu choyambitsa - zomwe zingalepheretse chidacho kuti chisayandama kuchoka pachoyambitsacho pakusintha kwazenera.
kuchedwa nambala | chinthu 0

Kuchedwa kusonyeza ndi kubisa chida (ms) - sikugwira ntchito pamanja choyambitsa

Ngati nambala yaperekedwa, kuchedwetsa kumayikidwa pazithunzi zonse ziwiri

Kapangidwe kachinthu ndi:delay: { "show": 500, "hide": 100 }
html boolean zabodza

Lolani HTML pazida.

Ngati ndi zoona, ma tag a HTML mu tooltip's titleadzawonetsedwa pazothandizira. Ngati zabodza, textnjira ya jQuery idzagwiritsidwa ntchito kuyika zomwe zili mu DOM.

Gwiritsani ntchito mawu ngati mukuda nkhawa ndi kuukira kwa XSS.
kuika chingwe | ntchito 'pamwamba'

Momwe mungayikitsire chida - auto | pamwamba | pansi | kumanzere | kulondola.
Ikanenedwa auto, imawongoleranso chida chothandizira.

Ntchito ikagwiritsidwa ntchito kudziwa malo, imatchedwa ndi chida cha DOM node ngati mtsutso wake woyamba ndi chinthu choyambitsa DOM node ngati yachiwiri. Nkhaniyi thisimayikidwa ku chitsanzo cha tooltip.
wosankha chingwe | zabodza zabodza Ngati chosankha chaperekedwa, zida zopangira zida zimaperekedwa ku zomwe zafotokozedwazo. M'malo mwake, izi zimagwiritsidwanso ntchito kugwiritsa ntchito zida zothandizira pazinthu zowonjezera za DOM ( jQuery.onthandizo). Onani izi ndi chitsanzo chodziwitsa .
template chingwe '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML kuti mugwiritse ntchito popanga chida.

Ma tooltip adzabayidwa titlemu .tooltip-inner.

.arrowadzakhala muvi wa chida.

Chovala chakunja chiyenera kukhala ndi .tooltipkalasi ndi role="tooltip".
mutu chingwe | chinthu | ntchito ''

Mtengo wamutu wotsikirapo ngati titlechizindikirocho palibe.

Ngati ntchito yaperekedwa, idzayitanidwa ndi thiszolemba zake ku chinthu chomwe chida cholumikizidwa nacho.
choyambitsa chingwe 'hover focus'

Momwe chida chimayambira - dinani | kugwa | kuganizira | buku. Mutha kudutsa zoyambitsa zambiri; alekanitse iwo ndi danga.

'manual'zikuwonetsa kuti chidacho chidzayambika mwadongosolo kudzera mu .tooltip('show'), .tooltip('hide')ndi .tooltip('toggle')njira; mtengo uwu sungathe kuphatikizidwa ndi choyambitsa china chilichonse.

'hover'pachokha zidzabweretsa zida zomwe sizingayambitsidwe kudzera pa kiyibodi, ndipo ziyenera kugwiritsidwa ntchito ngati njira zina zotumizira uthenga womwewo kwa ogwiritsa ntchito kiyibodi zilipo.
kuchepetsa nambala | chingwe | ntchito 0

Kuchotsera kwa chida chogwirizana ndi chandamale chake.

Ntchito ikagwiritsidwa ntchito kuti izindikire kuchotsera, imatchedwa ndi chinthu chomwe chili ndi data ya offset ngati mkangano wake woyamba. Ntchitoyi iyenera kubweza chinthu chofanana. Choyambitsa chinthu cha DOM node chimadutsa ngati mkangano wachiwiri.

Kuti mumve zambiri onani za Popper.js's offset docs .
fallbackPlacement chingwe | gulu 'tembenuzani' Lolani kutchula malo omwe Popper adzagwiritse ntchito pobwerera. Kuti mumve zambiri onani za Popper.js's behaviour docs
malire chingwe | chinthu 'scrollParent' Kusefukira malire malire a chida. Imavomereza mfundo za 'viewport', 'window', 'scrollParent', kapena HTMLElement reference (JavaScript yokha). Kuti mudziwe zambiri onani zolemba za preventOverflow za Popper.js .
yeretsani boolean zoona Yambitsani kapena kuletsa ukhondo. Ngati adamulowetsa 'template'ndi 'title'options adzakhala sanitized.
whiteList chinthu Mtengo wofikira Chinthu chomwe chili ndi zovomerezeka ndi ma tag
sanitizeFn null | ntchito null Apa mutha kupereka ntchito yanu ya sanitize. Izi zitha kukhala zothandiza ngati mukufuna kugwiritsa ntchito laibulale yodzipatulira kuchita ukhondo.
popperConfig null | chinthu null Kuti musinthe kasinthidwe ka Popper.js ka Bootstrap, onani kasinthidwe ka Popper.js

Mawonekedwe a data pazida zapayekha

Zosankha za zida zapayekha zitha kufotokozedwa pogwiritsa ntchito mawonekedwe a data, monga tafotokozera pamwambapa.

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbirayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

$().tooltip(options)

Imangiriza chogwirizira ku zida zosonkhanitsira.

.tooltip('show')

Imawulula zida za chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe (ie zisanachitike shown.bs.tooltip). Izi zimatengedwa ngati "choyambitsa" choyambitsa chida. Zida zokhala ndi ziro zazitali sizimawonetsedwa.

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

.tooltip('hide')

Imabisa chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanabisike (ie zisanachitike hidden.bs.tooltip). Izi zimatengedwa ngati "choyambitsa" choyambitsa chida.

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

.tooltip('toggle')

Imatembenuza chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe kapena kubisidwa (ie chisanachitike shown.bs.tooltipkapena hidden.bs.tooltipchochitikacho). Izi zimatengedwa ngati "choyambitsa" choyambitsa chida.

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

.tooltip('dispose')

Imabisa ndi kuwononga chida cha chinthu. Zida zomwe zimagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectorkusankha ) sizingawonongeke pazigawo zoyambitsa mbadwa.

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

.tooltip('enable')

Imapatsa chida cha chinthu kuti chiwonetsedwe. Zida zothandizira zimayatsidwa mwachisawawa.

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

.tooltip('disable')

Imachotsa kuthekera kwa chida cha chinthu kuti chiwonetsedwe. Zidazi zitha kuwonetsedwa pokhapokha zitayatsidwanso.

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

.tooltip('toggleEnabled')

Imasintha kuthekera kwa chida cha chinthu kuti chiwonetsedwe kapena kubisika.

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

.tooltip('update')

Imakonzanso pomwe pali chida cha chinthu.

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

Zochitika

Mtundu wa Chochitika Kufotokozera
show.bs.tip Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
chiwonetsero.bs.tip Chochitikachi chimachotsedwa pamene chida chawonekera kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize).
hide.bs.tip Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
zobisika.bs.tip Chochitikachi chimachotsedwa pamene chida chatha kubisidwa kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize).
inserted.bs.tooltip Chochitikachi chimachotsedwa pambuyo pa show.bs.tooltipchochitikacho pamene template ya tooltip yawonjezeredwa ku DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})