Tembipururã ñe’ẽmondo

Tembiecharã

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

• Umi tembipuru’i ñe’ẽmondo ojerovia 3er parte biblioteca Popper rehe oñemohenda hag̃ua. Emoinge va’erã popper.min.js bootstrap.js mboyve térã eipuru bootstrap.bundle.min.js/ bootstrap.bundle.jsoguerekóva Popper ikatu hag̃uáicha tembiaporã ñe’ẽmondo omba’apo!
• 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.
• Umi tembipuru’i ñe’ẽmondo ikatu oñemboguata peteĩ elemento rupive peteĩ DOM sombra ryepýpe.

¿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-bs-toggleatributo rupive:

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

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. Umi dirección ojehechauka espejo-pe ojepuru jave Bootstrap RTL-pe.

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

Ha HTML jeporupyre reheve oñembojoapy:

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

Peteĩ SVG reheve:

Sass rehegua

Variables rehegua

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

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:

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')
})

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

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

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

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

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-bs-, -peguáicha data-bs-animation="". Ejesareko emoambue hag̃ua káso tipo opción réra camelCase-gui kebab-case-pe embohasávo umi opción atributo de datos rupive. Techapyrã, eipuru rangue data-bs-customClass="beautifier", eipuru data-bs-custom-class="beautifier".

Oipurúvo función orekóvapopperConfig

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

Método-kuéra rehegua

hechauka

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.

tooltip.show()

mongañy

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.

tooltip.hide()

toggle rehegua

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.

tooltip.toggle()

omboyke haguã

Oñomi ha ohundi peteĩ elemento tembipururã ñeꞌepykuaa (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe). 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 .

tooltip.dispose()

mbopu'aka

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

tooltip.enable()

mbogue

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

tooltip.disable()

toggleOjejapokuaa

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

tooltip.toggleEnabled()

mbopyahu

Ombopyahu peteĩ elemento tembipuru’i ñemohendaha.

tooltip.update()

ohupytyInstancia

Método estático ohejáva ndéve rehupyty hag̃ua instancia tembipuru’i rehegua ojoajúva peteĩ elemento DOM rehe

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

ohupytyTérãEjapoInstancia

Método estático ohejáva ndéve rehupyty hag̃ua tembipuru’i ñe’ẽmondo instancia ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu oiméramo noñemoñepyrũi

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

Umi mba’e oikóva

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

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

tooltip.hide()