Konsèy zouti

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin tooltip la:

• Tooltips konte sou 3yèm pati bibliyotèk Popper pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper pou konsèy zouti yo travay!
• Ti konsèy yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
• Konsèy zouti ak tit zewo-longè pa janm parèt.
• Espesifye container: 'body'pou evite rann pwoblèm nan eleman ki pi konplèks (tankou gwoup opinyon nou yo, gwoup bouton, elatriye).
• Deklanche konsèy sou eleman kache pa pral travay.
• Konsèy zouti pou .disabledoswa disabledeleman yo dwe deklanche sou yon eleman wrapper.
• Lè yo deklanche soti nan lyen ipèr ki kouvri plizyè liy, konsèy zouti yo pral santre. Sèvi ak white-space: nowrap;sou ou <a>pou evite konpòtman sa a.
• Ti konsèy yo dwe kache anvan eleman korespondan yo te retire nan DOM la.
• Konsèy zouti yo ka deklanche gras a yon eleman andedan yon DOM lonbraj.

Gen tout sa? Gwo, ann wè ki jan yo travay ak kèk egzanp.

Egzanp: Pèmèt konsèy sou zouti toupatou

Youn nan fason yo inisyalize tout konsèy sou yon paj ta dwe chwazi yo pa data-bs-toggleatribi yo:

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

Egzanp yo

Pase sou lyen ki anba yo pou wè konsèy sou zouti:

Pase sou bouton ki anba yo pou wè kat direksyon konsèy yo: anwo, adwat, anba, ak agoch. Enstriksyon yo reflete lè w ap itilize Bootstrap nan RTL.

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

Epi ak HTML koutim te ajoute:

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

Avèk yon SVG:

Sass

Varyab

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

Itilizasyon

Plugin konsèy zouti a jenere kontni ak mak sou demann, epi pa default mete konsèy zouti apre eleman deklanche yo.

Deklanche konsèy zouti a atravè JavaScript:

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

Marke

Marke ki nesesè pou yon konsèy zouti se sèlman yon dataatribi epi titlesou eleman HTML ou vle gen yon konsèy. Markup pwodwi a nan yon konsèy zouti se pito senp, menm si li mande pou yon pozisyon (pa default, mete nan toppa Plugin la).

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

Eleman andikape

Eleman ki gen disabledatribi a pa entèaktif, sa vle di itilizatè yo pa ka konsantre, hover, oswa klike sou yo pou deklanche yon konsèy (oswa popover). Kòm yon solisyon, ou pral vle deklanche konsèy zouti ki soti nan yon anbalaj <div>oswa <span>, depreferans te fè klavye konsantre lè l sèvi avèk 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>

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-animation="". Asire w ke w chanje kalite ka a nan non opsyon an soti nan camelCase nan kebab-case lè w ap pase opsyon yo atravè atribi done yo. Pou egzanp, olye pou yo itilize data-bs-customClass="beautifier", sèvi ak data-bs-custom-class="beautifier".

Sèvi ak fonksyon akpopperConfig

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

Metòd

montre

Revele konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an (sa vle di anvan shown.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la. Konsèy zouti ak tit zewo-longè pa janm parèt.

tooltip.show()

kache

Kache konsèy yon eleman. Retounen bay moun kap rele a anvan enfòmasyon an te kache (sa vle di anvan hidden.bs.tooltipevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

tooltip.hide()

baskile

Aktivite konsèy zouti yon eleman. Retounen bay moun kap rele a anvan yo te montre enfòmasyon an aktyèlman oswa kache (sa vle di anvan evènman shown.bs.tooltipan hidden.bs.tooltiprive). Sa a konsidere kòm yon "manyèl" deklanche nan konsèy la.

tooltip.toggle()

jete

Kache epi detwi ti konsèy yon eleman (Retire done ki estoke sou eleman DOM). Konsèy zouti ki sèvi ak delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

tooltip.dispose()

pèmèt

Bay enfòmasyon yon eleman nan kapasite pou yo montre. Ti konsèy yo aktive pa default.

tooltip.enable()

enfim

Retire kapasite pou yo montre konsèy yon eleman. Konsèy zouti a pral sèlman kapab montre si li re-aktive.

tooltip.disable()

toggleEnabled

Aktivite kapasite pou konsèy yon eleman yo dwe montre oswa kache.

tooltip.toggleEnabled()

aktyalizasyon

Mete ajou pozisyon ti konsèy yon eleman.

tooltip.update()

getInstance

Metòd estatik ki pèmèt ou jwenn egzanp enfòmasyon ki asosye ak yon eleman DOM

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

getOrCreateInstance

Metòd estatik ki pèmèt ou jwenn yon egzanp zouti ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.

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

Evènman

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

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

tooltip.hide()