Nasihun kayan aiki

Dubawa

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

• Bayanan kayan aiki sun dogara ga Popper na ɓangare na uku don sakawa. Dole ne ku haɗa popper.min.js kafin bootstrap.js, ko amfani da bootstrap.bundle.min.jswanda ya ƙunshi Popper.
• 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.

Misalai

Kunna shawarwarin kayan aiki

Kamar yadda aka ambata a sama, dole ne ka fara amfani da kayan aiki kafin a iya amfani da su. Hanya ɗaya don fara duk bayanan kayan aiki akan shafi shine zaɓi su ta hanyar data-bs-togglehalayensu, kamar haka:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Nasihun kayan aiki akan hanyoyin haɗin gwiwa

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Tukwici na kayan aiki na al'ada

Kuna iya siffanta bayyanar tukwici na kayan aiki ta amfani da masu canjin CSS . Mun saita aji na al'ada tare data-bs-custom-class="custom-tooltip"da iyakacin kamannin mu na al'ada kuma muyi amfani da shi don ƙetare canjin CSS na gida.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Hanyoyi

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

Tare da SVG:

CSS

Masu canji

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, kayan aikin kayan aiki yanzu suna amfani da masu canjin CSS na gida .tooltipdon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Dangane da Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka keɓance na gwajidata-bs-config wanda zai iya daidaita tsarin sassa mai sauƙi azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Amfani da aiki tare dapopperConfig

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

Hanyoyin

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Abubuwan da suka faru

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()