Malangizo

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu yowonjezera:

• Zida zimadalira laibulale ya chipani chachitatu Popper kuti ikhazikike. Muyenera kuphatikiza popper.min.js pamaso pa bootstrap.js kapena gwiritsani ntchito bootstrap.bundle.min.js/ bootstrap.bundle.jsyomwe ili ndi Popper kuti zida zigwire ntchito!
• 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.

Chitsanzo: Yambitsani zida kulikonse

Njira imodzi yokhazikitsira zida zonse patsamba ingakhale yosankha malinga ndi zomwe ali nazo data-bs-toggle:

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

Zitsanzo

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

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

Ndipo ndi HTML yachizolowezi yowonjezedwa:

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

Ndi SVG:

Sass

Zosintha

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

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:

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')
})

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-, monga mu data-bs-animation="". Onetsetsani kuti musinthe mtundu wamtundu wa zosankha kuchokera ku camelCase kupita ku kebab-case podutsa zosankha kudzera pa data. Mwachitsanzo, m'malo mogwiritsa data-bs-customClass="beautifier"ntchito data-bs-custom-class="beautifier".

Kugwiritsa ntchito ndipopperConfig

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

Njira

chiwonetsero

Imawulula zida za chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe (ie zisanachitike shown.bs.tooltip). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira. Zida zokhala ndi mitu zazitali sizimawonetsedwa.

tooltip.show()

kubisa

Imabisa chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanabisike (ie zisanachitike hidden.bs.tooltip). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira.

tooltip.hide()

kusintha

Imatembenuza chida cha chinthu. Imabwerera kwa woyimbirayo chida chisanasonyezedwe kapena kubisidwa (ie chisanachitike shown.bs.tooltipkapena hidden.bs.tooltipchochitikacho). Izi zimatengedwa ngati "kuyambitsa" kwa chida chothandizira.

tooltip.toggle()

kutaya

Imabisa ndi kuwononga chida cha chinthu (Imachotsa deta yosungidwa pa chinthu cha DOM). Zida zomwe zimagwiritsa ntchito kugawira ena (omwe amapangidwa pogwiritsa ntchito selectorkusankha ) sizingawonongeke pazigawo zoyambitsa mbadwa.

tooltip.dispose()

athe

Imapatsa chida cha chinthu kuti chiwonetsedwe. Zothandizira zimayatsidwa mwachisawawa.

tooltip.enable()

letsa

Imachotsa kuthekera kwa chida cha chinthu kuti chiwonetsedwe. Zidazi zitha kuwonetsedwa pokhapokha zitayatsidwanso.

tooltip.disable()

toggleEnabled

Imasintha kuthekera kwa chida cha chinthu kuti chiwonetsedwe kapena kubisika.

tooltip.toggleEnabled()

sinthani

Imakonzanso pomwe pali chida cha chinthu.

tooltip.update()

getInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza chida cholumikizidwa ndi chinthu cha DOM

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

GetOrCreateInstance

Njira yosasunthika yomwe imakupatsani mwayi wopeza chida cholumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike.

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

Zochitika

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

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

tooltip.hide()