Malangizo

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu yowonjezera:

• Zida zimadalira laibulale ya gulu lachitatu Popper kuti ikhazikike. Muyenera kuphatikiza popper.min.js m'mbuyomu bootstrap.js, kapena gwiritsani ntchito bootstrap.bundle.min.jsyomwe ili ndi Popper.
• Zida ndizolowera pazifukwa zogwirira ntchito, chifukwa chake muyenera kuziyambitsa nokha .
• Zida zokhala ndi mitu zazitali sizimawonetsedwa.
• Nenani container: 'body'kuti mupewe kupereka zovuta muzinthu zovuta kwambiri (monga magulu athu olowetsa, magulu a batani, ndi zina).
• Kuyambitsa zida zazinthu zobisika sikungagwire ntchito.
• Zida .disabledkapena disabledzinthu ziyenera kuyambitsidwa pa chinthu chokulunga.
• Zikayambika kuchokera ku ma hyperlink omwe amatambasula mizere ingapo, nsonga za zida zidzakhazikika. Gwiritsani white-space: nowrap;ntchito zanu <a>kuti mupewe izi.
• Zida ziyenera kubisika zisanachotsedwe mu DOM.
• Zida zitha kuyambika chifukwa cha chinthu chomwe chili mkati mwa mthunzi wa DOM.

Muli nazo zonse? Chabwino, tiyeni tiwone momwe amagwirira ntchito ndi zitsanzo zina.

Zitsanzo

Yambitsani zida zothandizira

Monga tafotokozera pamwambapa, muyenera kuyambitsa zida zothandizira musanagwiritse ntchito. Njira imodzi yokhazikitsira zida zonse patsamba ingakhale kuwasankha malinga ndi momwe data-bs-togglealili, monga:

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

Malangizo pa maulalo

Yendani pamwamba pa maulalo omwe ali pansipa kuti muwone zida zothandizira:

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

Zothandizira mwamakonda

Mutha kusintha mawonekedwe a zida pogwiritsa ntchito mitundu ya CSS . Timakhazikitsa kalasi yokhazikika data-bs-custom-class="custom-tooltip"kuti iwonetsere mawonekedwe athu ndikugwiritsa ntchito kupitilira kusintha kwa CSS komweko.

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

Mayendedwe

Yendani pamwamba pa mabatani omwe ali pansipa kuti muwone njira zinayi zazida: pamwamba, kumanja, pansi, ndi kumanzere. Mayendedwe amawonekera mukamagwiritsa ntchito Bootstrap mu 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>

Ndipo ndi HTML yachizolowezi yowonjezedwa:

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

Ndi SVG:

CSS

Zosintha

Monga gawo la njira yosinthira ya CSS ya Bootstrap, zida zogwiritsira ntchito tsopano zimagwiritsa ntchito zosintha za CSS zakumaloko .tooltipkuti zisinthidwe zenizeni zenizeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

  --#{$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};
  

Zosintha za Sass

$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

Kugwiritsa ntchito

Pulogalamu yowonjezera ya tooltip imapanga zokhutira ndi zolembera zomwe zimafunidwa, ndipo mwachisawawa zimayika zida pambuyo pa zomwe zimayambitsa.

Yambitsani chida kudzera pa 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')
})

Markup

Cholembera chofunikira pa chida ndi mawonekedwe chabe datandipo titlepa chinthu cha HTML mukufuna kukhala ndi chida. Zolemba zopangira zida ndizosavuta, ngakhale zimafunikira malo (mwachisawawa, zokhazikitsidwa topndi pulogalamu yowonjezera).

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

Zinthu zolemala

Zinthu zomwe zili ndi mawonekedwe disabledake sizimayenderana, kutanthauza kuti ogwiritsa ntchito sangathe kuyang'ana, kuyang'ana pamwamba, kapena kuzidina kuti ayambitse chida (kapena popover). Monga njira yogwirira ntchito, mudzafuna kuyambitsa chida kuchokera pa chokulunga <div>kapena <span>, chopangidwa kuti chikhale chokhazikika pogwiritsa ntchito 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>

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Kugwiritsa ntchito ndipopperConfig

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

Njira

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

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

Zochitika

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

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

tooltip.hide()