Yanapakuykuna

Hatun qhawariy

Imakuna yachanapaq yanapakuypa yanapakuynin plugin kaqwan llamk'achkaspa:

• Llamkanakuna yuyaychaykuna kimsa kaq biblioteca Popper kaqpi hapirin churanapaq. Popper.min.js ñawpaqta churanayki tiyan bootstrap.js, utaq hukta llamk'achiy bootstrap.bundle.min.jsmayqinchus Popper kachkan.
• 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.

¿Tukuy chaykunatachu hap’irqanki? Hatun, qhawarisunchis imaynatas llank’anku wakin ejemplokunawan.

Ejemplos

Yanapakuypa yanapakuyninkunata atichiy

Hawa nisqanchis hina, manaraq llamk’achkaspa yanapakuykunata qallarinayki tiyan. Huk ñan huk p'anqapi llapa yanapakuykunata qallariypaq kanman, data-bs-toggleatributonkuman hina akllay, kayhina:

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

T'inkikunapi yanapakuykuna

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

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

Sapanchasqa yanapakuykuna

CSS tikraqkunawan llamkanakunap rikchaynintam ruwayta atinki . Huk sapanchasqa clase kaqwan churayku data-bs-custom-class="custom-tooltip"sapanchasqa rikchayniyku alcancepaq chaymanta llamk'achiyku huk kiti CSS tikraq llallinanpaq.

.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

Uraypi kaq botones patapi makiwan ñit’iy tawa yanapakuypa ñanninkunata qhawanaykipaq: pata, paña, uray, lluq’i ima. RTL kaqpi Bootstrap llamk'achkaspa ñankuna espejo kaqwan ruwasqa kanku.

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

Hinallataq HTML ruwasqa yapasqawan:

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

Huk SVG nisqawan:

CSS nisqa

Variables nisqakuna

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, yanapakuypa yanapakuyninkuna kunan kiti CSS tikraqkunata llamk'achinku .tooltipallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$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 variables nisqakuna

$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

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:

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

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

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

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 yanapakuypa yuyaychayninta llamk'achiyta munanki <div>utaq <span>, allin ruwasqa teclado-enfocable kaqwan llamk'achispa 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>

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Utilizar función conpopperConfig

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

Métodos

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

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

Eventos nisqakuna

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

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

tooltip.hide()