Source

Tembipururã ñe’ẽmondo

Kuatiahaipyre ha techapyrã oñembojoapy hag̃ua tembipururã Bootstrap jeporupyre CSS ha JavaScript ndive ojeporúvo CSS3 taꞌãngamýi ha dato-atributo-pe g̃uarã título ñeñongatuha tendápe g̃uarã.

Tembiecharã

Mba’e ojekuaava’erã ojepuru jave tembipuru’i ñemohendaha:

Tembipururã ñe’ẽmondo ojerovia 3ha tapicha aranduka’i Popper.js rehe oñemohenda hag̃ua. Emoingeva’erã popper.min.js bootstrap.js mboyve térã eipuru bootstrap.bundle.min.js/ bootstrap.bundle.jsoguerekóva Popper.js ikatu hag̃uáicha tembiaporã ñe’ẽmondo omba’apo!
Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .
Tembipuru’i ñe’ẽmondo ha’e opt-in rendimiento rehegua, upévare ndete voi remoñepyrũva’erã .
Umi tembipuru’i ñe’ẽmondo oguerekóva título ipukukue cero araka’eve ndojehechaukái.
Emombeꞌu container: 'body'ani hag̃ua ojejapo apañuãi renderización rehegua umi componente ikomplikadovévape (ñande aty jeikerãicha, aty botón rehegua, ha mbaꞌe).
Oñemboguata hag̃ua tembipuru’i ñe’ẽmondo umi elemento kañymby rehe ndoikomo’ãi.
Umi tembipururã ñe’ẽmondo .disabledtérã disabledelemento-kuérape g̃uarã oñembohapeva’erã peteĩ elemento envoltura rehegua.
Oñemboguata jave umi hipervínculo-gui oñemosarambíva heta línea rehe, umi tembipuru’i ñe’ẽmondo oñembohapéta. Eipuru white-space: nowrap;nde <a>s ári ani hagua oiko ko jepokuaa.
Umi tembipuru’i ñe’ẽmondo oñeñomiva’erã ojeipe’a mboyve DOM-gui umi elemento okorrespondéva.

¿Reguerekópa opa umíva? Tuicha mba'e, jahecha mba'éichapa omba'apo hikuái algunos ejemplos reheve.

Techapyrã: Emboguata tembipuru’i ñe’ẽmondo oparupiete

Peteĩ tape oñemboguapy hag̃ua opaite tembipuru’i ñe’ẽmondo peteĩ páhinape ha’éta ojeporavo hag̃ua data-toggleatributo rupive:

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

Tembiecharã

Emoĩ nde po umi enlace oĩva ko’ápe rehecha hag̃ua tembipuru’i ñe’ẽmondo:

Emoinge nde po umi botón iguýpe rehecha hag̃ua irundy tembipuru’i ñe’ẽmondo: yvate, akatúa, iguy ha asu gotyo.

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

Ha HTML jeporupyre reheve oñembojoapy:

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

Jeporu rehegua

Pe tembipuru’i ñemohendaha omoheñói contenido ha marcado ojejerurévo, ha por defecto omoĩ tembipuru’i ñe’ẽmondo elemento desencadenante rire.

Emoñepyrũ tembipuru’i ñe’ẽmondo JavaScript rupive:

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

Marcado rehegua

Pe marcado oñeikotevẽva peteĩ tembipuru’i ñe’ẽmondope g̃uarã ha’e peteĩ dataatributo añoite ha titleelemento HTML rehe reguerekoséva peteĩ tembipuru’i ñe’ẽmondo. Pe marcado oñembohekopyréva peteĩ tembipuru’i ñe’ẽmondo rehegua isãsove, jepémo oikotevẽ peteĩ tenda (por defecto, oñemohenda topplugin rupive).

Ojejapo hag̃ua tembipuru’i ñe’ẽmondo omba’apo hag̃ua teclado ha tecnología pytyvõhára puruhárape g̃uarã

Emoĩva’erã tembipuru’i ñe’ẽmondo añoite umi elemento HTML-pe, ymaite guive oñembohapéva teclado-pe ha oñembojoajúva (ha’eháicha joajuha térã formulario control). Jepémo umi elemento HTML arbitrario ( <span>s-icha) ikatu ojejapo enfoque-pe oñembojoapývo tabindex="0"atributo, kóva omoĩta umi ficha jejopy potencialmente molesto ha confuso umi elemento ndahaꞌeiva interactivo rehe umi teclado puruhárape g̃uarã. Avei, hetave tecnología oipytyvõva ko’áĝa nomoherakuãi tembipuru’i ko situación-pe.

Avei, ani rejerovia hese añoite hoverne tembipuru’i ñe’ẽmondo ñepyrũrã ramo, kóva ojapótagui ne tembipuru’i ñe’ẽmondo ndaikatumo’ãiha oñembohape teclado puruhárape g̃uarã.

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

Umi elemento oñemboykéva

Umi elemento oguerekóva disabledatributo ndaha’éi interactivo, he’iséva umi puruhára ndaikatuiha oñecentra, ojepyso térã ojepyso hesekuéra omoñepyrũ hag̃ua peteĩ tembipuru’i ñe’ẽmondo (térã popover). Peteĩ tembiaporãicha, emoñepyrũse tembipuru’i ñe’ẽmondo peteĩ envoltura-gui <div>térã <span>, iporãvéva ojejapo teclado-pe oñembohapéva ojeporúvo tabindex="0", ha embogueséta pe pointer-eventselemento oñemboykéva ári.

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Téra	Hesegua	Upevakuére	Techaukaha
animación rehegua	booleano rehegua	teete	Emoĩ peteĩ CSS ñemboguejy ñembohasa tembipuru’i ñe’ẽmondope
mba’yru rehegua	cadena rehegua \| elemento \| japu	japu	Ombojoaju tembipuru’i ñe’ẽmondo peteĩ elemento específico-pe. Tembiecharã: `container: 'body'`. Ko jeporavopyre ideprovéchoiterei ohejágui ndéve emohenda tembipuru’i ñe’ẽmondo kuatia osyryhápe elemento desencadenante ypýpe - ojokótava tembipuru’i ñe’ẽmondo ani hag̃ua oveve mombyry elemento desencadenante-gui peteĩ ventána tuichakue ñemoambue aja.
mbegue	papapy \| mba'e	0 rehegua	Retraso ojehechauka ha oñeñomi hag̃ua tembipuru’i ñe’ẽmondo (ms) - ndojeporúi tipo de disparo manual-pe Oñeme’ẽramo peteĩ papapy, ojejapo retardo mokõivévape kañy/jehechauka Objeto estructura ha’e: .`delay: { "show": 500, "hide": 100 }`
html rehegua	booleano rehegua	japu	Eheja HTML tembipuru’i ñe’ẽmondope. Añete ramo, umi etiqueta HTML oĩva tembipuru’i ñe’ẽmondope `title`oñembohasáta tembipuru’i ñe’ẽmondope. Japúramo, jQuery rembiaporã `text`ojeporúta oñemoinge hag̃ua mbaꞌekuaarã DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe.
colocación rehegua	cadena rehegua \| hembiapo	'yvate'	Mba'éichapa ikatu ñamohenda tembipuru'i ñe'ẽmondo - auto \| yvate \| yvy gotyo \| izquierda \| akatúa. Ojeꞌe jave `auto`, oorienta jeýta dinámicamente tembipuru’i ñe’ẽmondo. Ojepuru jave peteĩ tembiaporã ojekuaa hag̃ua ñemohenda, oñehenói tembipururã vore DOM nodo peteĩha argumento ramo ha elemento disparador nodo DOM mokõiha ramo. Pe `this`contexto oñemohenda tembipuru’i ñe’ẽñemi instancia-pe.
selector rehegua	cadena rehegua \| japu	japu	Oñeme’ẽramo peteĩ jeporavoha, umi mba’e’oka tembipuru’i ñe’ẽmondo rehegua oñeme’ẽta umi mba’e’oka oje’évape. En práctica, kóva ojepuru ikatu hag̃uáicha contenido HTML dinámico oguereko popovers oñembojoapýva. Ehecha kóva ha peteĩ techapyrã informativo .
plantilla rehegua	sã	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML ojepuru hag̃ua ojejapo jave tembipuru’i ñe’ẽmondo. Pe tembipuru'i `title`oñeinyecta va'erã pe `.tooltip-inner`. `.arrow`oikóta chugui pe tembipuru’i flecha. Pe elemento envoltura okápegua oguerekova'erã `.tooltip`clase ha `role="tooltip"`.
myakãha	cadena rehegua \| elemento \| hembiapo	'' .	Título valor por defecto `title`atributo ndaipóriramo. Oñemeꞌeramo peteĩ función, oñehenóita `this`irreferencia ñemohenda reheve pe elemento oñembojoajúvape tembipururã vore rehe.
ñembokapu	sã	'enfoque hover' rehegua.	Mba’éichapa oñemboguata tembipuru’i ñe’ẽmondo - eity \| hover rehegua \| enfoque \| popeguáva. Ikatu rembohasa heta disparador; omboja’o chupekuéra peteĩ espacio reheve. `'manual'`ohechauka tembipuru’i ñe’ẽmondo oñemboguatataha programáticamente `.tooltip('show')`, `.tooltip('hide')`ha umi `.tooltip('toggle')`método rupive; ko mba’ekuaarã ndaikatúi oñembojoaju ambue mba’e’apoha ndive. `'hover'`ijeheguiete osẽta tembipuru’i ñe’ẽmondo ndaikatúiva oñemboguata teclado rupive, ha ojepuruva’erã oĩramo añoite umi método alternativo oñembohasa hag̃ua peteĩchagua marandu teclado puruhárape g̃uarã.
desplazamiento rehegua	papapy \| sã	0 rehegua	Desplazamiento tembipuru’i ñe’ẽmondo rehegua iñemohendapyre rehegua. Ojeikuaave hag̃ua ehecha Popper.js offset docs .
fallbackOñemohenda	cadena rehegua \| matriz rehegua	'jere'	Eheja emombe’u mba’e tendapa oipurúta Popper fallback-pe. Ojeikuaave hag̃ua ehecha Popper.js rekoha kuatiañe’ẽ
límite rehegua	cadena rehegua \| mba'e rehegua	'desplazamientoTúva'.	Límite restricción de desbordamiento rehegua tembipuru’i ñe’ẽmondo rehegua. Omoneĩ umi mbaꞌekuaarã `'viewport'`, `'window'`, `'scrollParent'`, térã peteĩ HTMLElement ñembohekopyrã (JavaScript añoite). Ojeikuaave hag̃ua ehecha Popper.js kuatiahaipyre preventOverflow .

Umi atributo dato rehegua tembipuru’i peteĩteĩvape g̃uarã

Umi opción tembipuru’i peteĩteĩvape g̃uarã ikatu alternativamente oñemboheko umi atributo dato rehegua jepuru rupive, oñemyesakã haguéicha yvateve.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua.

`$().tooltip(options)`

Ombojoaju peteĩ tembipuru’i ñemboguataha peteĩ elemento ñembyaty rehe.

`.tooltip('show')`

Oikuaauka peteĩ elemento tembipururã ñe’ẽmondo. Ojevy ohenóivape ojehechauka mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve pe shown.bs.tooltipmba’e ojehúva). Kóva ojehecha peteĩ “manual” disparo herramienta rehegua. Umi tembipuru’i ñe’ẽmondo oguerekóva título ipukukue cero araka’eve ndojehechaukái.

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

`.tooltip('hide')`

Oñomi peteĩ elemento tembipuru’i ñe’ẽmondo. Ojevy ohenóivape oñeñomi mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve pe hidden.bs.tooltipmba’e ojehúva). Kóva ojehecha peteĩ “manual” disparo herramienta rehegua.

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

`.tooltip('toggle')`

Ombohasa peteĩ elemento tembipuru’i ñe’ẽmondo. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve shown.bs.tooltiptérã hidden.bs.tooltipmba’e’oka). Kóva ojehecha peteĩ “manual” disparo herramienta rehegua.

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

`.tooltip('dispose')`

Oñomi ha ohundi peteĩ elemento tembipuru’i ñe’ẽmondo. Umi tembipuru’i oipurúva delegación (ojejapóva ojeporúvo opciónselector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador ñemoñare rehe .

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

`.tooltip('enable')`

Omeꞌe peteĩ elemento tembipururã vore ikatuha ojehechauka hag̃ua. Tembipururã ñe’ẽmondo oñembohapéva ñepyrũrãme.

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

`.tooltip('disable')`

Oipeꞌa mbaꞌekuaarã peteĩ elemento tembipururã vore ojehechauka hag̃ua. Tembipuru’i ñe’ẽmondo ikatúta ojehechauka oñembohapéramo añoite.

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

`.tooltip('toggleEnabled')`

Ombohasa mbaꞌekuaarã peteĩ elemento tembipuru’i ñe’ẽmondo ojehechauka térã oñeñomi hag̃ua.

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

`.tooltip('update')`

Ombopyahu peteĩ elemento tembipuru’i ñemohendaha.

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

Umi mba’e oikóva

Tipo de Evento rehegua	Techaukaha
ohechauka.bs.tembipuru’i ñe’ẽmondo	Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave `show`método instancia rehegua.
ojehechauka.bs.tembipuru’i ñe’ẽmondo	Ko mba’e’oka oñembogue ojejapo rire tembipuru’i ñemboheko ojehecha hag̃ua puruhárape (oha’arõta CSS jehaipyre oñembotývo).
hide.bs.tembipuru’i ñe’ẽmondo	Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe `hide`método instancia rehegua.
hidden.bs.tembipuru’i ñe’ẽmondo	Ko mba’e ojehúva oñembogue oñemokañypa rire tembipuru’i ñe’ẽmondo puruháragui (oha’arõta CSS jehaipyre oñembotývo).
oñemoinge.bs.tembipuru’i ñe’ẽmondo	Ko mbaꞌe ojehúva oñembogue pe `show.bs.tooltip`mbaꞌe ojehúva rire oñembojoapy rire tembipururã ñemohendaha DOM-pe.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})