Lisebelisoa

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea tooltip:

• Litlhahiso li itšetlehile ka laeborari ea motho oa boraro Popper bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper e le hore lisebelisoa tsa lisebelisoa li sebetse!
• Litlhahiso ke tsa ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
• Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.
• Hlakisa container: 'body'ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo).
• Ho kenya lisebelisoa ho lisebelisoa tse patiloeng ho ke ke ha sebetsa.
• Lisebelisoa tsa lisebelisoa .disabledkapa disabledlikarolo li tlameha ho hlahisoa holim'a karolo ea wrapper.
• Ha e hlahisoa ho tsoa ho li-hyperlink tse nang le mela e mengata, lisebelisoa tsa lisebelisoa li tla ba teng. Sebelisa white-space: nowrap;ho hao <a>ho qoba boitšoaro bona.
• Lisebelisoa li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
• Lisebelisoa li ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.

O nale tseo tsohle? E kholo, a re boneng hore na ba sebetsa joang ka mehlala e meng.

Mohlala: Lumella lithulusi hohle

Tsela e 'ngoe ea ho qala lisebelisoa tsohle tse leqepheng e tla ba ho li khetha ka data-bs-toggletšobotsi ea tsona:

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

Mehlala

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

Tsamaea holim'a likonopo tse ka tlase ho bona litsela tse 'ne tsa lisebelisoa: holimo, ho le letona, tlase le le letšehali. Litaelo li bonts'oa ha u sebelisa Bootstrap ho 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>

'Me ka HTML e tloaelehileng e ekelitsoe:

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

Ka SVG:

Sass

Lintho tse fapaneng

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

Tšebeliso

plugin ea tooltip e hlahisa litaba le markup ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka 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

Letšoao le hlokahalang bakeng sa sesebelisoa ke datatšobotsi feela 'me titleho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng topke 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>

Lintho tse holofetseng

Lintho tse nang le disabledtšobotsi ha li sebelisane, ho bolelang hore basebelisi ha ba khone ho tsepamisa maikutlo, ho ōka, kapa ho li tobetsa ho kenya lisebelisoa (kapa popover). Joalo ka mokhoa oa ho sebetsa, o tla batla ho qala sesebelisoa ho tsoa ho sephutheloana <div>kapa <span>, se etselitsoeng hantle hore se tsepamise mohopolo ho sebelisa 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>

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-animation="". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha ho camelCase ho ea ho kebab-case ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, ho e-na le ho sebelisa data-bs-customClass="beautifier", sebelisa data-bs-custom-class="beautifier".

Ho sebelisa ts'ebetso lepopperConfig

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

Mekhoa

bontsha

E senola karolo ea lisebelisoa. E kgutlela ho moletsi pele thulusi e bontshwa (ke hore pele shown.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa. Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

tooltip.show()

pata

E pata ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se patiloe (ke hore pele hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

tooltip.hide()

toggle

E fetola ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se bontšoa kapa se patiloe (ke hore pele ketsahalo shown.bs.tooltipkapa hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

tooltip.toggle()

lahla

E pata le ho senya sesebelisoa sa element (E tlosa data e bolokiloeng ho element ea DOM). Litlhahiso tse sebelisang kemiso (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe holima lintho tse qalang.

tooltip.dispose()

nolofalletsa

E fa ntlha ea lisebelisoa bokhoni ba ho bonts'oa. Litlhahiso tsa lisebelisoa li lumelloa ka mokhoa oa kamehla.

tooltip.enable()

tima

E tlosa bokhoni ba ho hlahisa lisebelisoa tsa element. The tooltip e tla khona ho bonts'oa ha feela e buletsoe hape.

tooltip.disable()

toggleEnabled

E fetola bokhoni ba sesebelisoa sa element hore se bontšoe kapa se patehe.

tooltip.toggleEnabled()

nchafatsa

E kaonefatsa boemo ba ntlha ea lisebelisoa.

tooltip.update()

getInstance

Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa sesebelisoa o amanang le karolo ea DOM

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

getOrCreateInstance

Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa lisebelisoa tse amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.

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

Liketsahalo

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

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

tooltip.hide()