Source

Nasihun kayan aiki

Takaddun bayanai da misalai don ƙara kayan aikin Bootstrap na al'ada tare da CSS da JavaScript ta amfani da CSS3 don rayarwa da sifofin bayanai don ajiyar take na gida.

Dubawa

Abubuwan da ya kamata ku sani lokacin amfani da plugin ɗin kayan aiki:

  • Bayanan kayan aiki sun dogara da ɗakin karatu na ɓangare na uku Popper.js don matsayi. Dole ne ku haɗa da popper.min.js kafin bootstrap.js ko amfani bootstrap.bundle.min.js/ bootstrap.bundle.jswanda ya ƙunshi Popper.js don kayan aikin kayan aiki suyi aiki!
  • Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatarutil.js .
  • Nasihun kayan aiki suna shiga don dalilan aiki, don haka dole ne ka fara su da kanka .
  • Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.
  • Ƙayyade container: 'body'don guje wa yin matsaloli a cikin ƙarin hadaddun abubuwa (kamar ƙungiyoyin shigar da mu, ƙungiyoyin maɓalli, da sauransu).
  • Ƙirar kayan aiki akan abubuwan ɓoye ba zai yi aiki ba.
  • Dole ne a kunna nassosin kayan aiki don .disabledko disabledabubuwa akan abin nadi.
  • Lokacin da aka jawo daga hyperlinks waɗanda ke kan layi da yawa, kayan aikin kayan aiki za su kasance a tsakiya. Yi amfani white-space: nowrap;da <a>s ɗin ku don guje wa wannan halin.
  • Dole ne a ɓoye bayanan kayan aiki kafin a cire abubuwan da suka dace daga DOM.

Samu duk wannan? Mai girma, bari mu ga yadda suke aiki tare da wasu misalai.

Misali: Kunna shawarwarin kayan aiki a ko'ina

Hanya ɗaya don fara duk shawarwarin kayan aiki akan shafi shine zaɓi su ta yanayin su data-toggle:

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

Misalai

Tsallake kan hanyoyin da ke ƙasa don ganin kayan aiki:

Tattara wando next level keffiyeh kila ba ki ji labarin su ba. Hoton hoton gemu raw denim wasiƙar vegan messenger jakar stumptown. Farm-to-tebur seitan, mcsweeney's fixie dorewa quinoa 8-bit tufafin Amurka suna da terry Richardson vinyl chambray. Gemu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, hudu loko mcsweeney's tsabtace vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kofi viral.

Tsaya akan maɓallan da ke ƙasa don ganin kwatancen kayan aiki guda huɗu: sama, dama, ƙasa, da hagu.

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

Kuma tare da ƙarin HTML na al'ada:

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

Amfani

Filogin kayan aiki yana haifar da abun ciki da alama akan buƙata, kuma ta tsohuwa wuraren abubuwan kayan aiki bayan abubuwan da suka haifar da su.

Ƙaddamar da kayan aiki ta hanyar JavaScript:

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

Matsayin kayan aiki yana ƙoƙarin canzawa ta atomatik lokacin da kwandon iyaye yana da overflow: autoko overflow: scrollson namu .table-responsive, amma har yanzu yana kiyaye matsayin wuri na asali. Don warwarewa, saita boundaryzaɓin zuwa wani abu ban da ƙima ta asali, 'scrollParent', kamar 'window':

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

Alamar alama

Alamar da ake buƙata don tip ɗin kayan aiki datasifa ce kawai kuma titleakan ɓangarorin HTML ɗin da kuke son samun tip ɗin kayan aiki. Samfuran alamar kayan aiki yana da sauƙi, kodayake yana buƙatar matsayi (ta tsohuwa, an saita shi topta plugin).

Yin shawarwarin kayan aiki suyi aiki ga madannai da masu amfani da fasaha masu taimako

Ya kamata ku ƙara kayan aiki kawai zuwa abubuwan HTML waɗanda ke al'adar madannai-maida hankali da mu'amala (kamar hanyoyin haɗin gwiwa ko sarrafa tsari). Kodayake abubuwan HTML na sabani (kamar <span>s) ana iya mai da hankali ta hanyar ƙara tabindex="0"sifa, wannan zai ƙara yuwuwar tasha mai ban haushi da ruɗani akan abubuwan da ba sa mu'amala da masu amfani da madannai. Bugu da ƙari, yawancin fasahar taimako a halin yanzu ba sa sanar da kayan aiki a cikin wannan yanayin.

Bugu da ƙari, kar a dogara kawai a hovermatsayin abin faɗakar da kayan aikin ku, saboda wannan zai sa na'urorin ku ba su yiwu su jawo masu amfani da madannai ba.

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

Abubuwan da aka kashe

Abubuwan da ke da disabledsifa ba sa mu'amala da juna, ma'ana masu amfani ba za su iya mai da hankali ba, shawagi, ko danna su don faɗakar da kayan aiki (ko popover). A matsayin madaidaicin aiki, za ku so ku jawo tip ɗin kayan aiki daga nannade <div>ko <span>, wanda aka yi daidai da maɓalli mai mahimmanci ta amfani tabindex="0"da , kuma ku soke abin da ke pointer-eventskan nakasa.

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Suna Nau'in Default Bayani
tashin hankali boolean gaskiya Aiwatar da canjin CSS fade zuwa tip ɗin kayan aiki
ganga zaren | kashi | karya karya

Yana haɗa tip ɗin kayan aiki zuwa takamaiman yanki. Misali container: 'body':. Wannan zaɓin yana da amfani musamman don yana ba ku damar sanya kayan aiki a cikin kwararar daftarin aiki kusa da abin da ke haifarwa - wanda zai hana kayan aikin daga shawagi daga abin da ke kunnawa yayin girman taga.
jinkiri lamba | abu 0

Jinkirin nunawa da ɓoye bayanan kayan aiki (ms) - baya aiki ga nau'in fararwa na hannu

Idan an ba da lamba, ana amfani da jinkiri ga duka ɓoye/nunawa

Tsarin abu shine:delay: { "show": 500, "hide": 100 }
html boolean karya

Bada HTML a cikin tukwici na kayan aiki.

Idan gaskiya ne, HTML tags a cikin Tooltip's titleza a sanya a cikin Tooltip. Idan ƙarya, textza a yi amfani da hanyar jQuery don saka abun ciki a cikin DOM.

Yi amfani da rubutu idan kun damu da harin XSS.
jeri zaren | aiki ' saman'

Yadda ake saka kayan aiki - auto | saman | kasa | hagu | dama.
Lokacin autoda aka ƙayyade, zai sake jujjuya matakin kayan aiki.

Lokacin da aka yi amfani da aiki don ƙayyade wuri, ana kiran shi tare da kayan aiki na DOM node a matsayin hujja ta farko da maɓallin DOM mai jawowa a matsayin na biyu. An thissaita mahallin zuwa misalin kayan aiki.
mai zaɓe zaren | karya karya Idan an samar da mai zaɓe, za a ba da abubuwan da suka shafi kayan aiki zuwa takamaiman maƙasudai. A aikace, ana amfani da wannan don ba da damar abun ciki na HTML mai ƙarfi don ƙara fa'ida. Dubi wannan da misali mai ba da labari .
samfuri kirtani '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Tushen HTML don amfani yayin ƙirƙirar tukwici.

Za titlea yi allurar kayan aikin a cikin .tooltip-inner.

.arrowzai zama kibiyar tip ɗin kayan aiki.

Abun nadi na waje yakamata ya kasance yana da .tooltipaji da role="tooltip".
take zaren | kashi | aiki ''

Tsohuwar ƙimar take idan babu titlesifa.

Idan an ba da aiki, za a kira shi tare da thissaita saitin abin da aka makala kayan aikin.
jawo kirtani 'Hover focus'

Yadda ake kunna tip ɗin kayan aiki - danna | shawa | mayar da hankali | manual. Kuna iya wuce abubuwan jan hankali da yawa; raba su da sarari.

'manual'yana nuna cewa za a kunna titin kayan aiki ta hanyar tsari ta hanyar .tooltip('show'), .tooltip('hide')da .tooltip('toggle')hanyoyin; Ba za a iya haɗa wannan ƙimar tare da kowane abin tayar da hankali ba.

'hover'da kansa zai haifar da kayan aikin da ba za a iya kunna su ta hanyar madannai ba, kuma yakamata a yi amfani da su idan akwai wasu hanyoyin isar da bayanai iri ɗaya ga masu amfani da madannai.
biya diyya lamba | kirtani 0 Matsakaicin matakin kayan aiki dangane da manufar sa. Don ƙarin bayani koma zuwa Popper.js's offset docs .
fallbackPlacement zaren | tsararru 'juya' Bada izinin saka ko wane matsayi Popper zai yi amfani da shi akan koma baya. Don ƙarin bayani koma zuwa Docs halayyar Popper.js
iyaka zaren | kashi ' gungurawaParent' Matsakaicin ƙaƙƙarfan ƙayyadaddun ƙayyadaddun kayan aiki. Yana karɓar ƙimar 'viewport', 'window', 'scrollParent', ko ma'anar HTMLElement (JavaScript kawai). Don ƙarin bayani koma zuwa Popper.js's preventoverflow docs .

Halayen bayanai don ƙa'idodin kayan aiki guda ɗaya

Zaɓuɓɓuka don ƙayyadaddun bayanan kayan aiki ɗaya na iya zama a madadin ta hanyar amfani da sifofin bayanai, kamar yadda aka bayyana a sama.

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani.

$().tooltip(options)

Haɗa mai sarrafa kayan aiki zuwa tarin abubuwa.

.tooltip('show')

Yana bayyana matakin kayan aiki. Komawa ga mai kira kafin a nuna matakin kayan aiki (watau kafin shown.bs.tooltipabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki. Ba a taɓa nuna nassoshin kayan aiki masu tsayin sifili ba.

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

.tooltip('hide')

Yana ɓoye bayanan kayan aiki. Komawa ga mai kira kafin a ɓoye bayanan kayan aiki (watau kafin hidden.bs.tooltipabin ya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki.

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

.tooltip('toggle')

Yana jujjuya matakin kayan aiki. Komawa ga mai kira kafin a nuna tip ɗin kayan aiki a zahiri ko a ɓoye (watau kafin abin shown.bs.tooltipko hidden.bs.tooltipya faru). Ana ɗaukar wannan a matsayin "manual" yana haifar da tip ɗin kayan aiki.

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

.tooltip('dispose')

Yana ɓoyewa kuma yana lalata tushen kayan aiki. Nasihun kayan aiki waɗanda ke amfani da wakilai (wanda aka ƙirƙira ta amfani da selectorzaɓi ) ba za a iya lalata su daban-daban akan abubuwan da ke haifar da zuriya ba.

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

.tooltip('enable')

Yana ba da tip ɗin kayan aiki ikon nunawa. Ana kunna bayanan kayan aiki ta tsohuwa.

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

.tooltip('disable')

Yana kawar da damar da za a nuna tip ɗin kayan aiki. Za a iya nuna tip ɗin kayan aiki ne kawai idan an sake kunna shi.

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

.tooltip('toggleEnabled')

Yana jujjuya ikon kayan aikin abun nunawa ko ɓoye.

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

.tooltip('update')

Yana sabunta matsayi na tukwici na kayan aiki.

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

Abubuwan da suka faru

Nau'in Taron Bayani
nuna.bs.tooltip Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
nuna.bs.tooltip Ana korar wannan taron lokacin da aka bayyana kayan aikin ga mai amfani (zai jira canjin CSS ya kammala).
boye.bs.tooltip Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
boye.bs.tooltip Ana korar wannan taron lokacin da kayan aikin ya gama ɓoye daga mai amfani (zai jira canjin CSS ya kammala).
shigar.bs.tooltip An kori wannan taron bayan show.bs.tooltiptaron lokacin da aka ƙara samfurin kayan aiki zuwa DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})