Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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 bayanan-bs-halaye 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 don matsayi. Dole ne ku haɗa popper.min.js kafin bootstrap.js ko amfani bootstrap.bundle.min.js/ bootstrap.bundle.jswanda ya ƙunshi Popper don kayan aikin kayan aiki suyi aiki!
  • 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.
  • Ana iya kunna nassosin kayan aiki godiya ga wani abu a cikin inuwa DOM.
Ta hanyar tsoho, wannan bangaren yana amfani da ginanniyar sanitizer na abun ciki, wanda ke fitar da duk wani abu na HTML da ba a yarda da shi ba. Duba sashin sanitizer a cikin takaddun JavaScript ɗin mu don ƙarin cikakkun bayanai.
Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

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-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Misalai

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

Rubutun ɗigon wuri don nuna wasu hanyoyin haɗin layi tare da tukwici na kayan aiki. Wannan yanzu kawai filler ne, babu kisa. Abun ciki da aka sanya anan kawai don kwaikwayi kasancewar ainihin rubutu . Kuma duk wannan kawai don ba ku ra'ayin yadda kayan aikin kayan aiki zasu kasance yayin amfani da su a cikin yanayi na ainihi. Don haka da fatan kun ga yanzu yadda waɗannan nasihun kayan aiki akan hanyoyin haɗin gwiwa zasu iya aiki a aikace, da zarar kun yi amfani da su akan rukunin yanar gizonku ko aikinku .

Tsaya akan maɓallan da ke ƙasa don ganin kwatancen kayan aiki guda huɗu: sama, dama, ƙasa, da hagu. Ana nuna kwatance yayin amfani da Bootstrap a cikin RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-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-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Tare da SVG:

Sass

Masu canji

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, 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 warware wannan, saita boundaryzaɓi (don mai canza juzu'i ta amfani da popperConfigzaɓi) zuwa kowane HTMLElement don soke ƙimar tsoho 'clippingParents', kamar document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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 tsayawar shafin mai ban haushi da ruɗani akan abubuwan da ba sa mu'amala da masu amfani da madannai, kuma galibin 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-bs-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="tooltip-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 kunna tukwici na kayan aiki daga nannade <div>ko <span>, wanda aka yi daidai da maballin madannai ta amfani da tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, kamar a cikin data-bs-animation="". Tabbatar canza nau'in shari'ar sunan zaɓi daga raƙumi zuwa kebab-case lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, maimakon yin amfani da data-bs-customClass="beautifier", yi amfani da data-bs-custom-class="beautifier".

Lura cewa saboda dalilai na tsaro ba za a iya samar da sanitize, sanitizeFn, da zaɓuɓɓuka ta amfani da halayen bayanai ba.allowList
Suna Nau'in Default Bayani
animation boolean true Aiwatar da canjin CSS fade zuwa tip ɗin kayan aiki
container zaren | kashi | karya false

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.

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

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, innerTextza a yi amfani da dukiya don saka abun ciki a cikin DOM.

Yi amfani da rubutu idan kun damu da harin XSS.

placement zaren | aiki 'top'

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.

selector zaren | karya false 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 amfani da nassoshi na kayan aiki zuwa abubuwan DOM masu ƙarfi ( jQuery.ongoyan baya). Dubi wannan da misali mai ba da labari .
template kirtani '<div class="tooltip" role="tooltip"><div class="tooltip-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.

.tooltip-arrowzai zama kibiyar tip ɗin kayan aiki.

Abun nadi na waje yakamata ya kasance yana da .tooltipaji da role="tooltip".

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

trigger 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 .show(), .hide()da .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.

fallbackPlacements tsararru ['top', 'right', 'bottom', 'left'] Ƙayyade jeri na faɗuwa ta hanyar samar da jerin jeri a tsararru (domin fifiko). Don ƙarin bayani koma zuwa Docs halayyar Popper
boundary zaren | kashi 'clippingParents' Matsakaicin ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun kayan aiki (yana aiki ne kawai ga Popper's preventOverflow modifier). Ta hanyar tsoho yana 'clippingParents'kuma yana iya karɓar bayanin HTMLElement (ta JavaScript kawai). Don ƙarin bayani koma zuwa Popper's detectOverflow docs .
customClass zaren | aiki ''

Ƙara azuzuwan zuwa matakin kayan aiki lokacin da aka nuna shi. Lura cewa waɗannan azuzuwan za a ƙara su ban da kowane nau'i da aka kayyade a cikin samfuri. Don ƙara azuzuwan da yawa, raba su da sarari: 'class-1 class-2'.

Hakanan zaka iya wuce aikin da yakamata ya dawo da kirtani ɗaya mai ɗauke da ƙarin sunayen aji.

sanitize boolean true Kunna ko kashe tsaftar. Idan an kunna 'template'kuma 'title'za a tsabtace zaɓuɓɓuka. Duba sashin sanitizer a cikin takaddun JavaScript ɗin mu .
allowList abu Ƙimar ta asali Abu wanda ya ƙunshi halayen da aka yarda da alamun
sanitizeFn null | aiki null Anan zaku iya samar da aikin tsabtace ku. Wannan na iya zama da amfani idan kun fi son yin amfani da ɗakin karatu da aka keɓe don yin tsafta.
offset tsararru | zaren | aiki [0, 0]

Matsakaicin matakin kayan aiki dangane da manufar sa. Kuna iya wuce kirtani a cikin sifofin bayanai tare da raba waƙafi kamar:data-bs-offset="10,20"

Lokacin da aka yi amfani da aiki don tantance abin kashewa, ana kiran shi da wani abu mai ɗauke da popper placement, the reference, and popper rects as his first case. An wuce kullin DOM mai jawowa azaman hujja ta biyu. Dole ne aikin ya dawo da jeri tare da lambobi biyu: .[skidding, distance]

Don ƙarin bayani koma zuwa Popper's offset docs .

popperConfig null | abu | aiki null

Don canza saitunan Popper tsoho na Bootstrap, duba Tsarin Popper .

Lokacin da aka yi amfani da aiki don ƙirƙirar tsarin Popper, ana kiran shi da wani abu da ke ɗauke da tsohowar Popper na Bootstrap. Yana taimaka muku amfani da haɗa tsoho tare da tsarin ku. Dole ne aikin ya dawo da abin daidaitawa don Popper.

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.

Amfani da aiki tare dapopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

nuna

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.

tooltip.show()

boye

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.

tooltip.hide()

juya

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.

tooltip.toggle()

jefar

Yana ɓoyewa da lalata bayanan kayan aiki (Yana cire bayanan da aka adana akan ɓangaren DOM). 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.

tooltip.dispose()

ba da damar

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

tooltip.enable()

kashe

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.

tooltip.disable()

An kunna kunnawa

Yana jujjuya ikon kayan aikin abun nunawa ko ɓoye.

tooltip.toggleEnabled()

sabunta

Yana sabunta matsayi na tukwici na kayan aiki.

tooltip.update()

samunInstance

Hanyar a tsaye wacce ke ba ku damar samun misalin kayan aikin da ke da alaƙa da ɓangaren DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

samunOrCreateInstance

Hanyar a tsaye wacce ke ba ku damar samun misalin kayan aikin da ke da alaƙa da ɓangaren DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Abubuwan da suka faru

Nau'in taron Bayani
show.bs.tooltip Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
shown.bs.tooltip Ana korar wannan taron lokacin da aka bayyana kayan aikin ga mai amfani (zai jira canjin CSS ya kammala).
hide.bs.tooltip Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar misali.
hidden.bs.tooltip Ana korar wannan taron lokacin da kayan aikin ya gama ɓoye daga mai amfani (zai jira canjin CSS ya kammala).
inserted.bs.tooltip An kori wannan taron bayan show.bs.tooltiptaron lokacin da aka ƙara samfurin kayan aiki zuwa DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()