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 kaqpi hapirinku churanapaq. ! _ _
bootstrap.bundle.min.js
_bootstrap.bundle.js
_ - Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munan
util.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.
.disabled
icha elementokunapaq llamkanakuna huk p'istudisabled
elementopi 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.
prefers-reduced-motion
medios 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-toggle
atributonkuman hina akllay:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Ejemplos
Uraypi t'inkikuna patapi makiwan ñit'iy yanapakuykunata qhawanaykipaq:
Wakin chiru ukhupi t'inkikunata yanapakuykunawan rikuchinapaq tiyana qillqa . Kayqa kunanqa hunt’achiqlla, mana wañuchiqchu. Kaypi churasqa contenido chiqap qillqasqapa kayninta qatipanapaqlla . Hinallataq tukuy chaykuna huk yuyayta qusunaykipaqlla imayna yanapakuypa yanapakuyninkuna chiqap pacha situacionkunapi llamk'achisqa kaqtin. Chaymi suyakuy kunan rikurqanki imayna kay yanapakuykuna t'inkikunapi llamk'ayta atinku ruwaypi, huk kuti kikin sitioykipi utaq proyectoykipi llamk'achinki.
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 auto
yscroll
Tooltip posición kikinmanta tikrayta munan mayk'aq huk tayta waqaychana ñuqaykupaq overflow: auto
utaq overflow: scroll
hina .table-responsive
, ichaqa chaywanpas ñawpaq churaypa churayninta waqaychan. Allchaypaq, boundary
akllanata huk imamanpas churay mana ñawpaqmanta chanichu, 'scrollParent'
, ahinataq 'window'
:
$('#example').tooltip({ boundary: 'window' })
Markup
Huk yanapakuypa yanapakuypaq munasqa markaqa huk layallam data
chaymanta title
HTML elementopi huk yanapakuypa yanapakuyniyuq kayta munanki. Huk yanapakuypa paqarichisqan markasqa aswan sasan, ichaqa huk posiciónta munan (ñawpaqmanta, top
plugin 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, chaymanta aswan yanapakuq tecnologiakuna kunan mana willankuchu yanapakuypa yuyaychayninta kay situacionpi. Chaymanta, ama sapallapi hapipakuychu llamkanakunaykipaq hover
llamkanakuna 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 disabled
mana 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-events
mana 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=""
.
sanitize
,
sanitizeFn
chaymanta
whiteList
akllanakuna mana willay atributokuna llamk'achispa quyta atikunkuchu.
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: |
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: |
html nisqapi | boolean nisqa | pantasqa | HTML nisqa yanapakuypa yanapakuyninpi saqiy. Chiqap kaptinqa, yanapakuypa yanapakuyninpi HTML etiquetakuna yanapakuypa yanapakuyninpi Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki. |
churay | q'aytu | ruway | 'hanaq' | Imaynatataq yanapakuypa yuyaychayninta churana - auto | patamanta | urayninpi | lluq'i | paña. Huk llamkana churayta riqsinapaq llamk'achisqa kaqtinqa, llamkanakunap umalliqnin DOM nodowan ñawpaq argumenton hina chaymanta elemento desencadenante DOM nodo iskay kaq hina waqyasqa. Contexto |
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.on yanapakuy) 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
Aswan hawa p'istu elementoqa |
suti | q'aytu | elemento | ruway | '' . | Ñawpaqmanta churasqa titulu chani sichus Sichus huk llamk'ana qusqa, waqyasqa kanqa |
piñachiy | qaytu | 'hover enfoque' nisqa. | Imayna yanapakuypa yuyaychaynin qallarikun - | ñit'iy hover | enfoque | makiwan. Achka gatillokunatam pasawaq; chaykunata huk ch’usaqwan t’aqay.
|
offset nisqa | yupay | q'aytu | ruway | 0. | Desplazamiento de la punta de herramientas relativamente a su meta. Huk llamk'ayta t'inkisqata riqsinapaq llamk'achisqa kaptinqa, huk imayaywanmi waqyasqa, t'inkisqa willaykunata ñawpaq rimariynin hina. Rurayqa kikin rurasqa imayaytapas kutichinanmi. Chay elemento desencadenante DOM nodo iskay kaq argumento hina pasakun. Aswan willakuypaq qhaway Popperpa offset docs . |
fallbackClocación | q'aytu | matriz | 'kuyuchiy' | Permitir especificar cual posición Popper utilizará en fallback. Aswan willakuypaq Popperpa comportamiento docs nisqapi qhaway |
costumbreClase | q'aytu | ruway | '' . | Yanapakuypa yanapakuyninman clasekunata yapay rikuchisqa kaptin. Reparay kay clasekuna yapasqa kanqa mayqin clasekuna plantillapi nisqamanta yapasqa. Achka clasekunata yapanaykipaqqa, rakikunawan rakiy: Huk llamkanatapas pasayta atinki, huk sapalla kaskaqta kutichinan tiyan, yapa clase sutikunayuq. |
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 Popperpa preventOverflow qillqakuna . |
sanitizar | boolean nisqa | chiqaq | Saneamiento nisqa ruwayta atichiy utaq mana llamk’achiy. Si activado 'template' y 'title' opciones se sanitizarán. JavaScript qillqaykupi desinfectante t'aqapi qhaway . |
yuraqLista | ima | Ñawpaqmanta churasqa chani | Objeto que contiene atributos permitidos y etiquetas |
sanitizarFn | nullq | ruway | chusaq | Kaypiqa qam kikiykipa desinfectar función nisqatam suministrawaq. Kayqa allin kanman sichus huk dedicada biblioteca llamk’ayta munanki saneamiento ruwanapaq. |
popperConfig nisqa | nullq | ima | chusaq | Bootstrap kaqpa ñawpaqmanta Popper wakichiyninta tikranaykipaq, Popperpa wakichiyninta qhaway |
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 .
$().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.tooltip
ruway 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.tooltip
ruway 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.tooltip
utaq hidden.bs.tooltip
ruway 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 selector
akllanawan 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 show instancia 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 hide instancia 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.tooltip mayk'aq plantilla yanapakuypa willaynin DOM kaqman yapasqa. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})