Nasihun kayan aiki

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.

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:

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)

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

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

Amfani da aiki tare dapopperConfig

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

Hanyoyin

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

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()