Tembipururã ñe’ẽmondo

Tembiecharã

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

• Umi tembipuru’i ñe’ẽmondo ojerovia mbohapýha aranduka’i Popper rehe oñemohenda hag̃ua. Emoĩva’erã popper.min.js mboyve bootstrap.js, térã eipuru peteĩ bootstrap.bundle.min.jsoguerekóva Popper.
• 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.

Tembiecharã

Emboguata tembipuru’i ñe’ẽmondo

Ja’e haguéicha yvateve, emoñepyrũva’erã tembipuru’i ñe’ẽmondo ikatu mboyve ojepuru. Peteĩ tape oñemboguapy hag̃ua opaite tembipuru’i ñe’ẽmondo peteĩ páhinape ha’éta ojeporavo hag̃ua data-bs-toggleatributo rupive, péicha:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tembipururã ñe’ẽmondo umi enlace rehegua

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Tembipururã ñe’ẽmondo jeporupyre

Ikatu emohenda tembipururã ñe’ẽñemi jehechauka eipurúvo CSS mba’ekuaarã . Romohenda peteĩ clase personalizada orekóva data-bs-custom-class="custom-tooltip"alcance ore jehechauka jeporupyre ha roipuru romboyke hag̃ua peteĩ variable CSS local.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Direcciones rehegua

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Peteĩ SVG reheve:

CSS rehegua

Variables rehegua

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboheko oñembohapévape, tembipururã ñemboheko koꞌág̃a oipuru CSS mbaꞌekuaarã tendápegua on .tooltipoñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass mba’ekuaarã

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". 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. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Oipurúvo función orekóvapopperConfig

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

Método-kuéra rehegua

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Umi mba’e oikóva

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()