Dagiti tip ti remienta

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar ti tooltip plugin:

• Agpannuray dagiti Tooltip iti 3rd party library Popper para iti panagposision. Masapul nga iramanmo ti popper.min.js sakbay ti bootstrap.js wenno usarem ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper tapno agtrabaho dagiti toltips!
• Dagiti Tooltip ket opt-in para kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
• Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.
• Ibaga container: 'body'tapno maliklikan dagiti parikut ti panagiparang kadagiti ad-adu a komplikado a paset (kas dagiti grupo ti panagserrektayo, dagiti grupo ti buton, kdpy).
• Saan nga agtrabaho ti panangtignay kadagiti tooltip kadagiti nailemmeng nga elemento.
• Dagiti tip ti ramit para iti .disabledwenno disableddagiti elemento ket masapul a mai-trigger iti maysa nga elemento ti balkot.
• No mai-trigger manipud kadagiti hyperlink a mangsaklaw kadagiti adu a linia, dagiti tooltip ket maisentro. Usaren white-space: nowrap;ti <a>s-mo tapno maliklikan daytoy a kababalin.
• Dagiti tip ti ramit ket masapul a mailemmeng sakbay a dagiti maitunos nga elementoda ket naikkat manipud iti DOM.
• Dagiti Tooltip ket mabalin a mai-trigger gapu ti maysa nga elemento iti uneg ti anniniwan a DOM.

Naalamon amin dagita? Nasayaat, kitaentayo no kasano ti panagtrabahoda babaen ti sumagmamano a pagarigan.

Pagarigan: Pagbalinen dagiti tooltip iti sadinoman

Ti maysa a wagas a mangirugi kadagiti amin a toltip iti maysa a panid ket ti panangpili kadagitoy babaen ti data-bs-toggleattribute-da:

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

Dagiti pagarigan

I-hover dagiti link iti baba tapno makitam dagiti tooltip:

I-hover dagiti buton iti baba tapno makitam ti uppat a direksion ti toltips: ngato, kannawan, baba, ken kannigid. Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti 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>

Ket addaan iti nainayon a kostumbre nga HTML:

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

Iti maysa nga SVG:

Sass nga

Dagiti Variable

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

Panagusar

Ti plugin ti tooltip ket mangpataud ti linaon ken panagmarka no kasapulan, ken babaen ti kasisigud ket mangikabil kadagiti tooltip kalpasan ti elementoda a mangtignay.

I-trigger ti tooltip babaen ti 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')
})

Panagmarka

Ti kasapulan a marka para iti tooltip ket maysa laeng nga dataattribute ken titleiti elemento ti HTML kayatmo nga addaan iti tooltip. Ti napataud a marka ti maysa a tooltip ket imbes a simple, urayno daytoy ket agkasapulan ti posision (babaen ti kasisigud, naikeddeng iti topbabaen ti 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>

Dagiti baldado nga elemento

Dagiti elemento nga addaan iti disabledattribute ket saan nga interaktibo, kayatna a sawen dagiti agar-aramat ket dida mabalin ti agpokus, ag-hover, wenno ag-klik kadagitoy tapno mangtignay ti tooltip (wenno popover). Kas maysa a panagliklik, kayatmo a mangtignay ti tooltip manipud iti maysa a balkot <div>wenno <span>, nasayaat a naaramid a teklado-a-maipamaysa babaen ti panagusar ti 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>

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti camelCase iti kebab-case no ipasa dagiti pagpilian babaen dagiti attribute ti datos. Kas pagarigan, imbes nga usarem ti data-bs-customClass="beautifier", usarem ti data-bs-custom-class="beautifier".

Usar ti function nga addaanpopperConfig

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

Dagiti Pamay-an

ipakita

Ipalgakna ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti tooltip (kayatna a sawen sakbay a shown.bs.tooltipmapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip. Dagiti Tooltip nga addaan kadagiti zero-length a paulo ket saan a pulos a maiparang.

tooltip.show()

aglemmeng

Ilemmeng ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti tooltip (kayatna a sawen sakbay a hidden.bs.tooltipmapasamak ti pasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip.

tooltip.hide()

ag-toggle nga

I-toggle ti tooltip ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti tooltip (kayatna a sawen sakbay a mapasamak ti shown.bs.tooltipwenno hidden.bs.tooltippasamak). Maibilang daytoy a “manual” a panangtignay iti tooltip.

tooltip.toggle()

ibelleng

Ilemmeng ken dadaelen ti tooltip ti maysa nga elemento (Ikkaten ti naidulin a datos iti elemento ti DOM). Dagiti tip ti ramit nga agus-usar ti delegasion (a naparsua babaen ti panagusar ti selectorpagpilian ) ket saan a mabalin a saggaysa a madadael kadagiti kaputotan a mangtignay nga elemento.

tooltip.dispose()

pagbalinen

Mangted ti tooltip ti maysa nga elemento ti abilidad a maipakita. Dagiti Tooltip ket napalubosan babaen ti default.

tooltip.enable()

awan ti kabaelan

Ikkaten ti abilidad para iti tooltip ti maysa nga elemento a maipakita. Ti tooltip ket mabalin laeng a maipakita no daytoy ket na-enable manen.

tooltip.disable()

toggleNaipalubosan

I-toggles ti abilidad para iti tooltip ti maysa nga elemento a maipakita wenno mailemmeng.

tooltip.toggleEnabled()

pabaroen

Ipabaro ti posision ti tooltip ti maysa nga elemento.

tooltip.update()

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti tooltip nga instansia a nainaig iti maysa nga elemento ti DOM

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

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti pagarigan ti tooltip a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

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

Dagiti Pasamak

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

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

tooltip.hide()