Ibikoresho

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya tooltip:

• Ibikoresho byifashisha isomero ryishyaka rya 3 Popper kugirango ihagarare. Ugomba gushyiramo popper.min.js mbere ya bootstrap.js cyangwa gukoresha bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper kugirango ibikoresho bikore!
• Ibikoresho ni opt-in kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
• Ibikoresho bifite imitwe ya zeru-ndende ntibigaragara.
• Kugaragaza container: 'body'kugirango wirinde gutanga ibibazo mubice byinshi bigoye (nkitsinda ryacu ryinjiza, amatsinda ya buto, nibindi).
• Gukurura ibikoresho byibikoresho byihishe ntabwo bizakora.
• Ibikoresho .disabledcyangwa disabledibintu bigomba gukururwa kubintu bipfunyika.
• Iyo iturutse kuri hyperlinks ikurikirana imirongo myinshi, ibikoresho bizaba hagati. Koresha white-space: nowrap;kuri <a>s kugirango wirinde iyi myitwarire.
• Ibikoresho bigomba guhishwa mbere yuko ibintu bihuye bivanwa muri DOM.
• Ibikoresho birashobora gukururwa dukesha ikintu kiri imbere mu gicucu DOM.

Wabonye ibyo byose? Nibyiza, reka turebe uko bakorana ningero zimwe.

Urugero: Gushoboza ibikoresho ahantu hose

Uburyo bumwe bwo gutangiza ibikoresho byose kurupapuro byaba ari uguhitamo data-bs-togglekubiranga:

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

Ingero

Hisha hejuru yibi bikurikira kugirango urebe ibikoresho:

Hisha hejuru ya buto hepfo kugirango urebe ibyerekezo bine byerekana: hejuru, iburyo, hepfo, n'ibumoso. Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri 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>

Hamwe na HTML yihariye yongeyeho:

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

Hamwe na SVG:

Sass

Ibihinduka

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

Ikoreshwa

Ibikoresho bya plugin bitanga ibikubiyemo nibiranga kubisabwa, kandi kubisanzwe byerekana ibikoresho nyuma yibintu byabo.

Koresha ibikoresho ukoresheje 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

Ikimenyetso gisabwa kubikoresho ni dataikiranga gusa no titlekuri element ya HTML wifuza kugira igikoresho. Ikimenyetso cyakozwe mubikoresho byoroshye biroroshye, nubwo bisaba umwanya (kubisanzwe, byashyizweho topna 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>

Ibintu byahagaritswe

Ibintu bifite disabledikiranga ntabwo bikorana, bivuze ko abakoresha badashobora kwibanda, kugendagenda, cyangwa kubikanda kugirango batere igikoresho (cyangwa popover). Nkumurimo wakazi, uzashaka gukurura ibikoresho biva mubipfunyika <div>cyangwa <span>, nibyiza byakozwe na clavier-yibanze ukoresheje 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>

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-animation="". Witondere guhindura ubwoko bwurubanza rwamazina kuva kuri camelCase kuri kebab-urubanza mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, aho gukoresha data-bs-customClass="beautifier", koresha data-bs-custom-class="beautifier".

Gukoresha imikorere hamwepopperConfig

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

Uburyo

kwerekana

Yerekana igikoresho cyibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe (ni ukuvuga mbere yuko shown.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho. Ibikoresho bifite imitwe ya zeru ntigaragara.

tooltip.show()

kwihisha

Hisha igikoresho cyibikoresho. Garuka kumuhamagara mbere yigikoresho cyihishe mubyukuri (nukuvuga mbere yuko hidden.bs.tooltipibyabaye biba). Ibi bifatwa nk "intoki" itera ibikoresho.

tooltip.hide()

guhinduranya

Kuzuza ibikoresho by'ibikoresho. Garuka kumuhamagara mbere yuko ibikoresho byerekanwe cyangwa byihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.tooltipcyangwa hidden.bs.tooltipibyabaye bibaho). Ibi bifatwa nk "intoki" itera ibikoresho.

tooltip.toggle()

guta

Hisha kandi isenya igikoresho cyibikoresho (Kuraho amakuru yabitswe kubintu bya DOM). Ibikoresho bifashisha intumwa (zakozwe hakoreshejwe amahitamoselector ) ntibishobora gusenywa kugiti cyawe kubintu bikomokaho .

tooltip.dispose()

Gushoboza

Itanga igikoresho cyibikoresho ubushobozi bwo kwerekanwa. Ibikoresho bifasha byanze bikunze.

tooltip.enable()

guhagarika

Kuraho ubushobozi bwibikoresho byerekanwa. Igikoresho kizashobora gusa kwerekanwa niba cyongeye gukora.

tooltip.disable()

Guhindura

Kuzamura ubushobozi bwibikoresho byerekanwa cyangwa byihishe.

tooltip.toggleEnabled()

kuvugurura

Kuvugurura umwanya wibikoresho bya element.

tooltip.update()

Kubona

Uburyo buhagaze butuma ubona ibikoresho byerekana urugero bifitanye isano na DOM

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

GetOrCreateInstance

Uburyo buhamye bugufasha kubona urugero rwibikoresho bifitanye isano na DOM, cyangwa gukora bundi bushya mugihe bitatangijwe

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

Ibyabaye

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

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

tooltip.hide()