Podpowiedzi

Przegląd

Co należy wiedzieć podczas korzystania z wtyczki podpowiedzi:

• Podpowiedzi do pozycjonowania opierają się na zewnętrznej bibliotece Popper . Musisz dołączyć popper.min.js przed bootstrap.js lub użyć bootstrap.bundle.min.js/ bootstrap.bundle.jsktóry zawiera Poppera, aby podpowiedzi działały!
• Etykietki narzędzi są dostępne ze względu na wydajność, więc musisz je zainicjować samodzielnie .
• Etykietki narzędzi z tytułami o zerowej długości nigdy nie są wyświetlane.
• Określ container: 'body', aby uniknąć problemów z renderowaniem w bardziej złożonych komponentach (takich jak nasze grupy wejściowe, grupy przycisków itp.).
• Wyzwalanie podpowiedzi na ukrytych elementach nie będzie działać.
• Etykietki narzędzi dla elementów .disabledlub disabledmuszą być wyzwalane w elemencie opakowania.
• Po uruchomieniu z hiperłączy, które obejmują wiele linii, podpowiedzi zostaną wyśrodkowane. Użyj white-space: nowrap;na swoim <a>s, aby uniknąć tego zachowania.
• Etykietki narzędzi muszą być ukryte, zanim odpowiadające im elementy zostaną usunięte z DOM.
• Podpowiedzi mogą być wyzwalane dzięki elementowi wewnątrz cienia DOM.

Masz to wszystko? Świetnie, zobaczmy, jak działają na kilku przykładach.

Przykład: Włącz podpowiedzi wszędzie

Jednym ze sposobów na zainicjowanie wszystkich podpowiedzi na stronie byłoby wybranie ich według ich data-bs-toggleatrybutów:

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

Przykłady

Najedź na poniższe linki, aby zobaczyć podpowiedzi:

Najedź kursorem na poniższe przyciski, aby zobaczyć cztery wskazówki podpowiedzi: góra, prawo, dół i lewo. Kierunki są odzwierciedlane podczas używania Bootstrap w 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>

A z dodanym niestandardowym kodem HTML:

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

Z SVG:

Sass

Zmienne

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

Stosowanie

Wtyczka podpowiedzi generuje treść i znaczniki na żądanie i domyślnie umieszcza podpowiedzi po elemencie wyzwalającym.

Uruchom podpowiedź za pomocą 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')
})

Narzut

Wymagane znaczniki podpowiedzi to tylko dataatrybut i titleelement HTML, który chcesz mieć podpowiedź. Wygenerowany znacznik podpowiedzi jest dość prosty, chociaż wymaga pozycji (domyślnie ustawionej topprzez wtyczkę).

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

Elementy niepełnosprawne

Elementy z disabledatrybutem nie są interaktywne, co oznacza, że ​​użytkownicy nie mogą się na nich skoncentrować, najechać kursorem ani kliknąć ich, aby wywołać podpowiedź (lub popover). Aby obejść ten problem, zechcesz wywołać etykietkę z otoki <div>lub <span>, najlepiej, gdy jest to możliwe przy użyciu klawiatury, używając 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>

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-animation="". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z camelCase na kebab-case podczas przekazywania opcji przez atrybuty danych. Na przykład zamiast używać data-bs-customClass="beautifier", użyj data-bs-custom-class="beautifier".

Korzystanie z funkcji zpopperConfig

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

Metody

pokazać

Odsłania opis elementu. Wraca do wywołującego przed wyświetleniem podpowiedzi (tj. przed shown.bs.tooltipwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie podpowiedzi. Etykietki narzędzi z tytułami o zerowej długości nigdy nie są wyświetlane.

tooltip.show()

ukryć

Ukrywa podpowiedź elementu. Wraca do wywołującego, zanim podpowiedź została faktycznie ukryta (tj. przed hidden.bs.tooltipwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie podpowiedzi.

tooltip.hide()

przełącznik

Przełącza podpowiedź elementu. Powraca do wywołującego, zanim podpowiedź została faktycznie pokazana lub ukryta (tj. przed wystąpieniem zdarzenia shown.bs.tooltiplub ). hidden.bs.tooltipJest to uważane za „ręczne” wyzwalanie podpowiedzi.

tooltip.toggle()

dysponować

Ukrywa i niszczy podpowiedź elementu (usuwa dane zapisane w elemencie DOM). Etykietki narzędzi korzystające z delegowania (utworzone za pomocą opcji selector) nie mogą być indywidualnie niszczone w elementach podrzędnych wyzwalaczy.

tooltip.dispose()

włączać

Daje opisowi elementu możliwość pokazania. Etykietki narzędzi są domyślnie włączone.

tooltip.enable()

wyłączyć

Usuwa możliwość wyświetlania podpowiedzi elementu. Etykietka będzie widoczna tylko wtedy, gdy zostanie ponownie włączona.

tooltip.disable()

przełącz Włączone

Przełącza możliwość pokazywania lub ukrywania podpowiedzi elementu.

tooltip.toggleEnabled()

aktualizacja

Aktualizuje pozycję podpowiedzi elementu.

tooltip.update()

uzyskac instancje

Metoda statyczna , która pozwala uzyskać instancję podpowiedzi skojarzoną z elementem DOM

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

getOrCreateInstance

Metoda statyczna , która pozwala uzyskać instancję podpowiedzi skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

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

Wydarzenia

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

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

tooltip.hide()