Source

Yanapakuykuna

Qillqakuna chaymanta rikch'anakuna sapanchasqa Bootstrap yanapakuypa yanapakuyninkuna yapanapaq CSS kaqwan chaymanta JavaScript kaqwan CSS3 kaqwan kawsachiykunapaq chaymanta willay-atributokuna llaqta titulu waqaychaypaq.

Hatun qhawariy

Imakuna yachanapaq yanapakuypa yanapakuynin plugin kaqwan llamk'achkaspa:

  • Llamkanakuna yuyaychaykuna 3 kaq parti biblioteca Popper.js kaqpi hapirin churanapaq. Popper.min.js manaraq bootstrap.js kaqmanta churanayki tiyan utaq bootstrap.bundle.min.js/ llamk'achiy bootstrap.bundle.jsmayqinchus Popper.js kaqta hap'in chaymanta yanapakuykuna llamk'ananpaq!
  • Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .
  • 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.

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

¿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-toggleatributonkuman hina akllay:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Ejemplos

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

Pantalón apretado siguiente nivel keffiyeh probablemente no has escuchado de ellos. Foto cabina barba crudo denim tipografía vegano mensajero bolsa stumptown. Haciendamanta mesakama seitan, mcsweeneypa fixie sostenible quinoa 8-bit americano pachayuqmi huk terry richardson vinilo chambray. Barba tocón, cardigans banh mi lomo trueno misikuna. Tofu biodiésel williamsburg marfa, tawa loko mcsweeney's pichay vegano chambray. Huk chiqap irónico artesano imapas keytar , scenester chakra-manta-mesa banksy Austin twitter manejo freegan cred crudo denim huk-origen café viral.

Uraypi kaq botones patapi makiwan ñit’iy tawa yanapakuypa ñanninkunata qhawanaykipaq: pata, paña, uray, lluq’i ima.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Hinallataq HTML ruwasqa yapasqawan:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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:

$('#example').tooltip(options)
Desbordamiento autoyscroll

Tooltip posición kikinmanta tikrayta munan mayk'aq huk tayta waqaychana ñuqaykupaq overflow: autoutaq overflow: scrollhina .table-responsive, ichaqa chaywanpas ñawpaq churaypa churayninta waqaychan. Allchaypaq, boundaryakllanata huk imamanpas churay mana ñawpaqmanta chanichu, 'scrollParent', ahinataq 'window':

$('#example').tooltip({ boundary: 'window' })

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

Teclado chaymanta yanapakuy tecnologia llamk'aqkunapaq yanapakuypa yanapakuyninkuna llamk'ayta ruway

HTML elementokunaman yanapakuykunalla yapanayki tiyan mayqinkunachus ñawpaqmanta teclado-enfocables chaymanta interactivos kanku (kayhina t'inkikuna utaq formulario kamachiykuna). Aunque arbitrario HTML elementokuna (kayhina <span>s) ruwayta atikunku enfoquepaq atributo yapaspa tabindex="0", kayqa yapanqa potencialmente phiñachiq chaymanta pantasqa tabla sayaykunata mana interactivo elementokunapi teclado kaqmanta ruwaqkunapaq. Chaymantapas, aswan yanapakuy tecnologiakuna kunan mana willankuchu kay situacionpi yanapakuypa yuyaychayninta.

Chaymanta, ama sapallapi hapipakuychu llamkanakunaykipaq hoverllamkanakuna hina llamkanakunaykipaq, imaynachus kay yanapakuyniykikuna mana atikuq llamkanakuna teclado ruwaqkunapaq ruwanqa.

<!-- HTML to write -->
<a href="#" data-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="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 <div>utaq <span>, allin ruwasqa teclado-enfocable kaqwan llamk'achispa llamkanakuna llamk'achiyta munanki tabindex="0", chaymanta pointer-eventsmana atichisqa elemento kaqpi llallichiyta munanki.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Suti Niraq Ñawpaqchasqa Willay
animación boolean nisqa chiqaq Huk CSS chinkachiy tikrayta yanapakuypa yanapakuyninman churay
contenedor q'aytu | elemento | pantasqa pantasqa

Huk elemento específico nisqaman yanapakuypa yuyaychayninta yapan. Ejemplo: container: 'body'. Kay akllana aswan allin kan kaypi llamkanakunap willayninta qillqap puriyninpi churayta atikunki llamk'achiq elemento qayllapi - mayqinchus hark'anqa yanapakuypa yuyaychayninta llamk'achiq elementomanta karuman phawaykachayta huk ventana sayayninta tikraypi.
unayay yupay | ima 0.

Tardanza rikuchiy chaymanta pakay yanapakuypa yuyaychayninta (ms) - mana makiwan gatillo layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { "show": 500, "hide": 100 }
html nisqapi boolean nisqa pantasqa

HTML nisqa yanapakuypa yanapakuyninpi saqiy.

Chiqap kaptinqa, yanapakuypa yanapakuyninpi HTML etiquetakuna yanapakuypa yanapakuyninpi titleruwasqa kanqa. Sichus llulla, jQuery kaqpa textruwaynin llamk'achisqa kanqa DOM kaqman willayta churanapaq.

Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway 'hanaq'

Imaynatataq yanapakuypa yuyaychayninta churana - auto | patamanta | urayninpi | lluq'i | paña.
Mayk'aq autowillasqa kachkan, chaymanta dinamicamente yanapakuypa yuyaychayninta musuqmanta chiqanchanqa.

Huk llamkana churayta riqsinapaq llamk'achisqa kaqtinqa, llamkanakunap umalliqnin DOM nodowan ñawpaq argumenton hina chaymanta elemento desencadenante DOM nodo iskay kaq hina waqyasqa. Contexto thisnisqaqa yanapakuypa instancianmanmi churasqa kachkan.
akllaq q'aytu | pantasqa pantasqa Sichus huk akllana qusqa, yanapakuypa yanapakuynin imakuna kamachisqa metakunaman qusqa kanqa. Ruwaypi, kayqa llamk'achisqataqmi yanapakuypa yanapakuyninkunata DOM elementokuna dinamicamente yapasqakunaman ( jQuery.onyanapakuy) churanapaq. Kayta hinaspa huk willakuypaq ejemplota qaway .
plantilla qaytu '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML nisqapi llamk'achinapaq llamkanakunap yuyaychayninta ruwachkaspa llamk'achiy.

Chay herramientapa puntanmi titleinyectasqa kanqa chay .tooltip-inner.

.arrowchay herramientakunaq flechanmanmi tukupunqa.

Aswan hawa p'istu elementoqa .tooltipclase nisqayuqmi kanan chaymanta role="tooltip".
suti q'aytu | elemento | ruway '' .

Ñawpaqmanta churasqa titulu chani sichus titlelaya mana kanchu.

Sichus huk llamk'ana qusqa, waqyasqa kanqa thisreferencia churasqanwan chay elementoman mayqinmanchus llamkanakuna k'askasqa kachkan.
piñachiy qaytu 'hover enfoque' nisqa.

Imayna yanapakuypa yuyaychaynin qallarikun - | ñit'iy hover | enfoque | makiwan. Achka gatillokunatam pasawaq; chaykunata huk ch’usaqwan t’aqay.

'manual'.tooltip('show')rikuchin chay yanapakuypa yanapakuynin programaticamente , .tooltip('hide')chaymanta .tooltip('toggle')métodos kaqnintakama llamk'achisqa kananta ; kay chaniqa manam huk llamk'achiqwan kuskanchasqachu kanman.

'hover'sapallanmanta yanapakuypa yanapakuyninkunata ruwanqa mana teclado kaqnintakama llamk'achiyta atikunmanchu, chaymanta llamk'achinan tiyan sichus huk ñankuna kikin willayta teclado kaqmanta ruwaqkunapaq apachiypaq kanku.
offset nisqa yupay | qaytu 0. Desplazamiento de la punta de herramientas relativamente a su meta. Aswan willakuypaq qhaway Popper.js kaqpa offset docs .
fallbackClocación q'aytu | matriz 'kuyuchiy' Permitir especificar cual posición Popper utilizará en fallback. Aswan willakuypaq Popper.js kaqpa ruwaynin qillqakunata qhaway
frontera q'aytu | imakuna 'scrollParent' nisqa. Llamkanakunap yanapakuypa linderon de restricción de desbordamiento. 'viewport', 'window', 'scrollParent', icha HTMLElement willaypa chanikunata chaskikun (JavaScriptlla). Aswan willakuypaq qhaway Popper.js kaqpa preventOverflow qillqakuna .

Sapanchasqa yanapakuykunapaq willakuypa layakuna

Sapanchasqa yanapakuypa yanapakuyninkunapaq akllanakuna hukmanta willaypa layakuna llamk'achiyninwan willayta atikunku, ñawpaqpi sut'inchasqa hina.

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

$().tooltip(options)

Huk elemento huñusqaman huk yanapakuypa yanapaqninta k'askachin.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

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

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Huk elementopa yanapakuypa yuyaychayninta pakaspa chinkachin. Delegacionta llamk'achiq yanapakuykuna ( kay selectorakllanawan ruwasqa ) mana sapalla chinkachiyta atikunmanchu miray llamk'achiq elementokunapi.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

Huk elementopa yanapakuypa yuyaychayninta qawachinapaq utaq pakasqa kananpaq atiynintam tikran.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Huk elementopa yanapakuypa yanapakuyninpa maypi kayninta musuqchan.

$('#element').tooltip('update')

Eventos nisqakuna

Tipo de Evento Willay
rikuchiy.bs.herramientakuna Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.herramientakuna Kay ruwayqa llamkanakuna llamk'achiqman rikukuq ruwasqa kaptin llamk'achisqa (CSS tikraykunata tukunanta suyanqa).
pakay.bs.herramientakuna Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.herramientakuna Kay ruwayqa llamkanakuna llamk'achiqmanta pakasqa kayta tukuptin (CSS tikraykunata tukunanta suyanqa).
churasqa.bs.herramientakuna Kay ruwayqa ruwaymanta qhipaman llamk'achisqa kachkan show.bs.tooltipmayk'aq plantilla yanapakuypa willaynin DOM kaqman yapasqa. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})