Yanapakuykuna

Hatun qhawariy

Imakuna yachanapaq yanapakuypa yanapakuynin plugin kaqwan llamk'achkaspa:

• Llamkanakuna yuyaychaykuna 3 kaq parti biblioteca Popper kaqpi hapipakunku churanapaq. Popper.min.js manaraq bootstrap.js kaqmanta churanayki tiyan utaq bootstrap.bundle.min.js/ llamk'achiy bootstrap.bundle.jsmayqinchus Popper kaqta hap'in chaymanta yanapakuy yuyaychaykuna llamk'ananpaq!
• Llamkanakuna yuyaychaykuna ruwaypaq akllana kanku, chayrayku qam kikiyki qallarinayki tiyan .
• Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.
• container: 'body'Aswan sasa componentekunapi (yaykuna huñuyku, ñit'ina huñukuna, hukkuna hina) sasachakuykunata mana ruwaypaq willay .
• Pakasqa elementokunapi yanapakuypa yanapakuyninkunata qallarichiyqa manam llamkanqachu.
• .disabledicha elementokunapaq llamkanakuna huk p'istu disabledelementopi llamk'achisqa kanan tiyan.
• Achka chirukunata mast'ariq hipervínculokunamanta llamk'achisqa kaqtin, yanapakuypa yuyaychaykuna chawpichasqa kanqa. Utilizar white-space: nowrap;en tu <a>s para evitar este comportamiento.
• Llamkanakuna yuyaychaykuna pakasqa kanan tiyan manaraq tupaqnin elementokuna DOM kaqmanta hurqusqa kachkaptin.
• Tooltips nisqaqa huk llantu DOM ukhupi huk elementoman gracias nisqawanmi llamk'achisqa kanman.

¿Tukuy chaykunatachu hap’irqanki? Hatun, qhawarisunchis imaynatas llank’anku wakin ejemplokunawan.

Ejemplo: Tukuy hinantinpi yanapakuykunata atichiy

Huk ñan huk p'anqapi llapa yanapakuykunata qallariypaq kanman, data-bs-toggleatributonkuman hina akllay:

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

Ejemplos

Uraypi t'inkikuna patapi makiwan ñit'iy yanapakuykunata qhawanaykipaq:

Uraypi kaq botones patapi makiwan ñit’iy tawa yanapakuypa ñanninkunata qhawanaykipaq: pata, paña, uray, lluq’i ima. RTL kaqpi Bootstrap llamk'achkaspa ñankuna espejo kaqpi ruwasqa kanku.

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

Hinallataq HTML ruwasqa yapasqawan:

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

Huk SVG nisqawan:

Sass

Variables nisqakuna

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

Uso

Yanapakuypa yanapakuynin plugin ruwanakuna chaymanta markakuna mañakuypi ruwan, chaymanta ñawpaqmanta yanapakuypa yanapakuyninkunata elemento gatillo kaqninkumanta qhipaman churan.

JavaScript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

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

Huk yanapakuypa yanapakuypaq munasqa markaqa huk layallam datachaymanta titleHTML elementopi huk yanapakuypa yanapakuyniyuq kayta munanki. Huk yanapakuypa paqarichisqan markasqa aswan sasan, ichaqa huk posiciónta munan (ñawpaqmanta, topplugin kaqwan churasqa).

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

Mana atiq elementokuna

Atributoyuq elementokuna disabledmana interactivochu kanku, niyta munan llamk'aqkuna mana enfoqueta, hover utaq ñit'iyta atinkuchu huk yanapakuypa (utaq popover) llamk'achinapaq. Huk allichay hina, huk p'istumanta yanapakuypa yuyaychayninta llamk'achiyta munanki <div>utaq <span>, allin ruwasqa teclado-enfocable kaqwan llamk'achispa 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>

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-, imaynachus data-bs-animation="". Aswan allinta qhaway akllana sutipa caso laya camelCase kaqmanta kebab-case kaqman tikrayta mayk'aq akllanakunata willay atributokuna kaqninta pasanki. Ejemplopaq data-bs-customClass="beautifier", utilizanaykimantaqa data-bs-custom-class="beautifier".

Utilizar función conpopperConfig

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

Métodos

qawachiy

Huk elementopa yanapakuypa yuyaychaynintam qawachin. Llamaqman kutimun manaraq yanapakuypa yanapakuy chiqap rikuchisqa kachkaptin (icha manaraq shown.bs.tooltipruway ruwakuchkaptin). Kayqa huk “manual” llamk’anapaq yanapakuypa llamk’aynin hina qhawasqa. Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.

tooltip.show()

pakay

Huk elementopa yanapakuypa yuyaychayninta pakan. Llamaqman kutimun manaraq yanapakuypa yuyaychaynin chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.tooltipruway ruwakuchkaptin). Kayqa huk “manual” llamk’anapaq yanapakuypa llamk’aynin hina qhawasqa.

tooltip.hide()

toggle nisqa

Huk elementopa yanapakuypa yuyaychaynintam tikran. Llamaqman kutimun manaraq yanapakuypa yuyaychaynin chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.tooltiputaq hidden.bs.tooltipruway ruwakuchkaptin). Kayqa huk “manual” llamk’anapaq yanapakuypa llamk’aynin hina qhawasqa.

tooltip.toggle()

wischuy

Huk elementopa yanapakuypa yuyaychayninta pakan hinaspa chinkachin (DOM elementopi waqaychasqa willakuykunata hurqun). Delegacionta llamk'achiq yanapakuykuna ( kay selectorakllanawan ruwasqa ) mana sapalla chinkachiyta atikunmanchu miray llamk'achiq elementokunapi.

tooltip.dispose()

kawsarichisqa

Huk elementopa yanapakuypa yanapakuyninman qawachinapaq atiyta qun. Llamkanakuna yuyaychaykuna ñawpaqmanta atichisqa kachkan.

tooltip.enable()

wañuchisqa

Huk elementopa yanapakuypa yuyaychayninta qawachinapaq atiyta hurqun. Llamkanakunap yuyaychayninqa musuqmanta atichisqa kaptinllam rikuchiyta atikunqa.

tooltip.disable()

toggleAtichisqa

Huk elementopa yanapakuypa yuyaychayninta qawachinapaq utaq pakasqa kananpaq atiynintam tikran.

tooltip.toggleEnabled()

kunanyachiy

Huk elementopa yanapakuypa yanapakuyninpa maypi kayninta musuqchan.

tooltip.update()

GetInstancia

Método estático mayqinchus huk DOM elementowan tinkisqa yanapakuypa instancian chaskiyta atikun

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

Instanciata tariyUtaq Ruway

Método estático mayqinchus huk DOM elementowan tinkisqa yanapakuypa instanciata hapiyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa

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

Eventos nisqakuna

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

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

tooltip.hide()