Source

Vidokezo vya zana

Hati na mifano ya kuongeza vidokezo maalum vya Bootstrap na CSS na JavaScript kwa kutumia CSS3 kwa uhuishaji na sifa za data kwa hifadhi ya mada ya ndani.

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya kidokezo:

  • Vidokezo vya zana hutegemea maktaba ya watu wengine Popper.js kwa nafasi. Ni lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie bootstrap.bundle.min.js/ bootstrap.bundle.jsambayo ina Popper.js ili vidokezo vya zana kufanya kazi!
  • Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .
  • Vidokezo vya zana ni kuchagua kuingia kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
  • Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.
  • Bainisha container: 'body'ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k).
  • Kuanzisha vidokezo kwenye vipengele vilivyofichwa haitafanya kazi.
  • Vidokezo vya zana .disabledau disabledvipengele lazima vianzishwe kwenye kipengele cha kanga.
  • Inapoanzishwa kutoka kwa viungo vinavyotumia mistari mingi, vidokezo vya zana vitawekwa katikati. Tumia white-space: nowrap;kwenye yako <a>ili kuepuka tabia hii.
  • Vidokezo vya zana lazima vifichwe kabla ya vipengee vinavyolingana kuondolewa kwenye DOM.
  • Vidokezo vya zana vinaweza kuanzishwa shukrani kwa kipengele ndani ya DOM ya kivuli.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Umepata hayo yote? Kubwa, wacha tuone jinsi wanavyofanya kazi na mifano kadhaa.

Mfano: Washa vidokezo vya zana kila mahali

Njia moja ya kuanzisha vidokezo vyote kwenye ukurasa itakuwa kuvichagua kulingana na data-togglesifa zao:

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

Mifano

Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:

Suruali za kubana ngazi ya pili keffiyeh pengine hujazisikia . Picha kibanda ndevu mbichi shoes letterpress vegan messenger mfuko stumptown. Mavazi ya aina ya seitan ya shamba hadi meza, vazi la mcsweeney endelevu la quinoa 8-bit lina chambray ya terry richardson vinyl. Ndevu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Fundi wa kejeli sana whatever keytar , scenester farm-to-table banksy Austin twitter kushughulikia freegan cred ghafi denim single-origin kahawa virusi.

Elea juu ya vitufe vilivyo hapa chini ili kuona maelekezo manne ya vidokezo: juu, kulia, chini na kushoto.

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

Na HTML maalum imeongezwa:

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

Matumizi

Programu-jalizi ya kidokezo huzalisha maudhui na uwekaji alama inapohitajika, na kwa chaguo-msingi vidokezo vya mahali baada ya kipengee cha vianzishaji.

Anzisha kidokezo cha zana kupitia JavaScript:

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

Msimamo wa kidokezo hujaribu kubadilika kiotomatiki wakati kontena kuu ina overflow: autoau overflow: scrollkama kama yetu .table-responsive, lakini bado huhifadhi nafasi ya uwekaji asili. Ili kusuluhisha, weka boundarychaguo kwa kitu kingine chochote isipokuwa dhamana chaguo-msingi 'scrollParent', kama vile 'window':

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

Alama

Alama inayohitajika ya kidokezo ni datasifa tu na titlekwenye kipengee cha HTML ungependa kuwa na kidokezo. Alama inayozalishwa ya kidokezo ni rahisi, ingawa inahitaji nafasi (kwa chaguo-msingi, iliyowekwa topna programu-jalizi).

Kufanya vidokezo vya zana kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi

Unapaswa kuongeza vidokezo vya zana kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kulenga kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>s) vinaweza kuangaziwa kwa kuongeza tabindex="0"sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi. Kwa kuongeza, teknolojia nyingi za usaidizi kwa sasa hazitangazi kidokezo cha zana katika hali hii.

Zaidi ya hayo, usitegemee pekee hoverkama kichochezi cha kidokezo chako, kwa kuwa hii itafanya vidokezo vyako vishindwe kuanzisha kwa watumiaji wa kibodi.

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

Vipengele vilivyozimwa

Vipengele vilivyo na disabledsifa haviingiliani, kumaanisha kuwa watumiaji hawawezi kuangazia, kuelea juu au kubofya ili kuanzisha kidokezo cha zana (au popover). Kama suluhu, utataka kuamsha kidokezo kutoka kwa kanga <div>au <span>, iliyofanywa iweze kulenga kibodi kwa kutumia tabindex="0", na ubatilishe pointer-eventskwenye kipengele kilichozimwa.

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-animation="".

Jina Aina Chaguomsingi Maelezo
uhuishaji boolean kweli Tumia mpito wa kufifisha wa CSS kwenye kidokezo cha zana
chombo kamba | kipengele | uongo uongo

Huweka kidokezo kwa kipengele mahususi. Mfano container: 'body':. Chaguo hili ni muhimu sana kwa kuwa hukuruhusu kuweka ncha ya zana katika mtiririko wa hati karibu na kipengee cha kuamsha - ambayo itazuia ncha ya zana kuelea kutoka kwa kipengee cha kuchochea wakati wa kubadilisha ukubwa wa dirisha.
kuchelewa nambari | kitu 0

Kuchelewa kuonyesha na kuficha kidokezo cha zana (ms) - haitumiki kwa aina ya kichochezi cha mwongozo

Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili

Muundo wa kitu ni:delay: { "show": 500, "hide": 100 }
html boolean uongo

Ruhusu HTML kwenye kidokezo cha zana.

Ikiwa ni kweli, lebo za HTML kwenye kidokezo cha vidhibiti titlezitatolewa kwenye kidokezo. Ikiwa sivyo, textmbinu ya jQuery itatumika kuingiza maudhui kwenye DOM.

Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS.
uwekaji kamba | kazi 'juu'

Jinsi ya kuweka ncha ya zana - otomatiki | juu | chini | kushoto | haki.
Ikibainishwa auto, itaelekeza upya kidirisha cha zana.

Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha uwekaji, huitwa kifundo cha kifundo cha DOM kama hoja yake ya kwanza na kipengee cha kuanzisha nodi ya DOM kama ya pili. thisMuktadha umewekwa kwa mfano wa kidokezo .
kiteuzi kamba | uongo uongo Iwapo kiteuzi kitatolewa, vipengee vya vidokezo vitakabidhiwa kwa walengwa maalum. Kwa mazoezi, hii inatumika pia kutumia vidokezo kwa vipengele vya DOM vilivyoongezwa kwa nguvu ( jQuery.onusaidizi). Tazama hii na mfano wa kuelimisha .
kiolezo kamba '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML msingi ya kutumia unapounda kidokezo.

Vidokezo vya zana titlevitadungwa kwenye .tooltip-inner.

.arrowitakuwa mshale wa kidokezo.

Kipengele cha kanga cha nje kinapaswa kuwa na .tooltipdarasa na role="tooltip".
kichwa kamba | kipengele | kazi ''

Thamani chaguo-msingi ya kichwa ikiwa titlesifa haipo.

Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa kikiwa na thismarejeleo yake yaliyowekwa kwa kipengele ambacho kidokezo cha zana kimeambatishwa.
kichochezi kamba 'hover focus'

Jinsi kidokezo kinavyoanzishwa - bofya | tembea | kuzingatia | mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi.

'manual'inaonyesha kuwa kidokezo cha zana kitaanzishwa kiprogramu kupitia .tooltip('show'), .tooltip('hide')na .tooltip('toggle')mbinu; thamani hii haiwezi kuunganishwa na kichochezi kingine chochote.

'hover'peke yake itasababisha vidokezo vya zana ambavyo haviwezi kuanzishwa kupitia kibodi, na inapaswa kutumika tu ikiwa mbinu mbadala za kuwasilisha taarifa sawa kwa watumiaji wa kibodi zipo.
kukabiliana nambari | kamba 0 Mpangilio wa kidokezo kuhusiana na lengo lake. Kwa maelezo zaidi rejelea hati za kukabiliana na Popper.js .
fallbackPlacement kamba | safu 'pindua' Ruhusu kubainisha ni nafasi gani Popper itatumia kwenye njia mbadala. Kwa habari zaidi rejelea hati za tabia za Popper.js
mpaka kamba | kipengele 'scrollParent' Kizuizi cha kufurika kikomo cha ncha ya zana. Hukubali thamani za 'viewport', 'window', 'scrollParent', au rejeleo la Kipengele cha HTML (JavaScript pekee). Kwa maelezo zaidi rejelea hati za preventOverflow za Popper.js .

Sifa za data za vidokezo vya mtu binafsi

Chaguzi za vidokezo vya mtu binafsi zinaweza kubainishwa kwa matumizi ya sifa za data, kama ilivyoelezwa hapo juu.

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

$().tooltip(options)

Huambatisha kidhibiti kidokezo kwenye mkusanyiko wa vipengele.

.tooltip('show')

Hufichua kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa (yaani kabla ya shown.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana. Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.

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

.tooltip('hide')

Huficha kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kufichwa (yaani kabla ya hidden.bs.tooltiptukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.

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

.tooltip('toggle')

Hugeuza kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.tooltipau hidden.bs.tooltiptukio). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.

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

.tooltip('dispose')

Huficha na kuharibu ncha ya zana ya kipengele. Vidokezo vya zana vinavyotumia ugawaji madaraka (ambavyo vimeundwa kwa kutumia chaguo )selector haviwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.

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

.tooltip('enable')

Hutoa kidokezo cha zana cha kipengele uwezo wa kuonyeshwa. Vidokezo vya zana vinawezeshwa kwa chaguo-msingi.

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

.tooltip('disable')

Huondoa uwezo wa kidokezo cha kipengee kuonyeshwa. Kidokezo cha zana kitaweza tu kuonyeshwa ikiwa kimewashwa tena.

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

.tooltip('toggleEnabled')

Hugeuza uwezo wa kidokezo cha kipengee kuonyeshwa au kufichwa.

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

.tooltip('update')

Husasisha nafasi ya kidokezo cha kipengee.

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

Matukio

Aina ya Tukio Maelezo
onyesha.bs.kidokezo Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
imeonyeshwa.bs.kidokezo Tukio hili huwashwa wakati kidokezo cha zana kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).
ficha.bs.kidokezo Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
siri.bs.kidokezo Tukio hili hutupwa wakati kidokezo kimekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).
kidokezo.cha.bs Tukio hili linafutwa baada ya show.bs.tooltiptukio wakati kiolezo cha kidokezo kimeongezwa kwenye DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})