Podpowiedzi

Dokumentacja i przykłady dodawania niestandardowych podpowiedzi Bootstrap z CSS i JavaScript przy użyciu CSS3 do animacji i atrybutów danych do lokalnego przechowywania tytułów.

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!
• Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to .
• 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-toggleatrybutów:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

A z dodanym niestandardowym kodem HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Stosowanie

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

Uruchom podpowiedź za pomocą JavaScript:

$('#example').tooltip(options)

$('#example').tooltip({ boundary: 'window' })

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-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="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). Jako obejście, będziesz chciał wyzwolić podpowiedź z otoki <div>lub <span>, najlepiej, aby można było skoncentrować się na klawiaturze za pomocą tabindex="0", i przesłonić pointer-eventswyłączony element.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-animation="".

Metody

$().tooltip(options)

Dołącza obsługę podpowiedzi do kolekcji elementów.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

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.

$('#element').tooltip('hide')

.tooltip('toggle')

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.

$('#element').tooltip('toggle')

.tooltip('dispose')

Ukrywa i niszczy opis elementu. Etykietki narzędzi korzystające z delegowania (utworzone za pomocą opcji selector) nie mogą być indywidualnie niszczone w podrzędnych elementach wyzwalających.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Aktualizuje pozycję podpowiedzi elementu.

$('#element').tooltip('update')

Wydarzenia

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})