Popisky

Přehled

Co byste měli vědět při používání pluginu tooltip:

• Popisky se při určování polohy spoléhají na knihovnu Popper třetí strany . Popper.min.js musíte zahrnout před bootstrap.js, nebo použít ten bootstrap.bundle.min.js, který obsahuje Popper.
• Popisky jsou z důvodu výkonu volitelné, takže je musíte inicializovat sami .
• Popisky s názvy nulové délky se nikdy nezobrazují.
• Určete container: 'body', abyste se vyhnuli problémům s vykreslováním ve složitějších komponentách (jako jsou naše vstupní skupiny, skupiny tlačítek atd.).
• Spouštění popisků u skrytých prvků nebude fungovat.
• Popisky pro prvky .disablednebo disabledmusí být spuštěny na prvku obálky.
• Při spuštění z hypertextových odkazů, které zahrnují více řádků, budou popisky nástrojů vycentrovány. Chcete-li se tomuto chování vyhnout, použijte white-space: nowrap;na svém s.<a>
• Před odstraněním příslušných prvků z modelu DOM musí být popisy nástrojů skryty.
• Popisky lze spouštět díky prvku uvnitř stínového DOM.

Máš to všechno? Skvělé, podívejme se, jak fungují s některými příklady.

Příklady

Povolit popisky

Jak bylo uvedeno výše, musíte inicializovat popisky, než je budete moci použít. Jedním ze způsobů, jak inicializovat všechny popisky na stránce, je vybrat je podle jejich data-bs-toggleatributu, například:

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

Popisky k odkazům

Umístěním kurzoru na níže uvedené odkazy zobrazíte popisky:

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

Vlastní popisky

Vzhled popisků můžete přizpůsobit pomocí proměnných CSS . Nastavíme vlastní třídu s data-bs-custom-class="custom-tooltip"pro rozsah našeho vlastního vzhledu a použijeme ji k přepsání místní proměnné CSS.

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

Pokyny

Umístěním ukazatele myši na níže uvedená tlačítka zobrazíte čtyři směry popisků: nahoře, vpravo, dole a vlevo. Pokyny jsou zrcadleny při použití Bootstrap v RTL.

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

A s přidaným vlastním HTML:

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

S SVG:

CSS

Proměnné

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS nyní popisky využívají místní proměnné CSS .tooltippro vylepšené přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$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 proměnné

$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

Používání

Plugin tooltip generuje obsah a označení na vyžádání a ve výchozím nastavení umísťuje popisky za jejich spouštěcí prvek.

Spusťte popis pomocí JavaScriptu:

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

Označení

Požadované označení pro popis je pouze dataatribut a titlena prvku HTML chcete mít popis. Vygenerované označení popisku je poměrně jednoduché, i když vyžaduje pozici (ve výchozím nastavení topje pluginem nastavena na hodnotu).

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

Zakázané prvky

Prvky s disabledatributem nejsou interaktivní, což znamená, že uživatelé se na ně nemohou zaměřit, umístit na ně ukazatel myši nebo na ně kliknout, aby vyvolali nápovědu (nebo vyskakovací okno). Jako řešení budete chtít spouštět nápovědu z obálky <div>nebo <span>, ideálně tak, aby bylo možné zaostřit na klávesnici pomocí 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>

Možnosti

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

Použití funkce spopperConfig

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

Metody

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

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

Události

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

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

tooltip.hide()