Source

Popovery

Dokumentacja i przykłady dodawania popoverów Bootstrap, takich jak te znalezione w iOS, do dowolnego elementu w witrynie.

Przegląd

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

  • Popovery opierają się na zewnętrznej bibliotece Popper.js do pozycjonowania. Aby popovery działały , musisz dołączyć popper.min.js przed bootstrap.js lub użyć bootstrap.bundle.min.js/ bootstrap.bundle.jsktóry zawiera Popper.js!
  • Popovery wymagają wtyczki podpowiedzi jako zależności.
  • Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to .
  • Popovery są włączane ze względu na wydajność, więc musisz je zainicjować samodzielnie .
  • Zerowa długość titlei contentwartości nigdy nie pokażą popovera.
  • 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 okienek popover na ukrytych elementach nie będzie działać.
  • Wyskakujące okienka dla .disabledlub disabledelementy muszą być wyzwalane na elemencie opakowania.
  • Po uruchomieniu z kotwic, które zawijają się w wielu liniach, popovery będą wyśrodkowane między całkowitą szerokością kotwic. Użyj white-space: nowrap;na swoim <a>s, aby uniknąć tego zachowania.
  • Popovery muszą być ukryte, zanim odpowiadające im elementy zostaną usunięte z DOM.

Czytaj dalej, aby zobaczyć, jak działają popovery na kilku przykładach.

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

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

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

Przykład: Korzystanie z containeropcji

Jeśli masz jakieś style w elemencie nadrzędnym, które kolidują z popoverem, będziesz chciał określić niestandardowy container, aby zamiast tego pojawiał się kod HTML popovera w tym elemencie.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Przykład

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Cztery kierunki

Dostępne są cztery opcje: wyrównanie do góry, do prawej, do dołu i do lewej.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Odrzuć przy następnym kliknięciu

Użyj focuswyzwalacza, aby odrzucić okienka popover przy następnym kliknięciu przez użytkownika innego elementu niż element przełączania.

Konkretne znaczniki wymagane do odrzucenia przy następnym kliknięciu

Aby zapewnić prawidłowe działanie w różnych przeglądarkach i platformach, należy użyć <a>tagu, a nie<button> tagu, a także dołączyć tabindexatrybut.

Odrzucane popover 
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Elementy niepełnosprawne

Elementy z disabledatrybutem nie są interaktywne, co oznacza, że ​​użytkownicy nie mogą na nich najeżdżać ani klikać, aby wywołać okienko wyskakujące (lub podpowiedź). Jako obejście, będziesz chciał wyzwolić popover z opakowania <div>lub <span>nadpisać pointer-eventsna wyłączonym elemencie.

W przypadku wyłączonych wyzwalaczy okienek popover możesz również preferować data-trigger="hover"wyświetlanie okienka popover jako natychmiastowej wizualnej informacji zwrotnej dla użytkowników, ponieważ mogą oni nie oczekiwać kliknięcia wyłączonego elementu.

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

Stosowanie

Włącz popovery przez JavaScript:

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

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

Nazwa Rodzaj Domyślna Opis
animacja logiczne PRAWDA Zastosuj zanikające przejście CSS do popover
pojemnik ciąg | element | fałszywy fałszywy

Dołącza popover do określonego elementu. Przykład: container: 'body'. Ta opcja jest szczególnie przydatna, ponieważ pozwala umieścić okienko popover w przepływie dokumentu w pobliżu elementu wyzwalającego — co zapobiegnie oddalaniu się okienka popover od elementu wyzwalającego podczas zmiany rozmiaru okna.
zawartość ciąg | element | funkcjonować ''

Domyślna wartość treści, jeśli data-contentatrybut nie jest obecny.

Jeśli podana zostanie funkcja, zostanie wywołana z thisreferencją ustawioną na element, do którego dołączony jest popover.
opóźnienie numer | obiekt 0

Opóźnienie pokazywania i ukrywania popovera (ms) - nie dotyczy wyzwalania ręcznego

Jeśli podano numer, opóźnienie jest stosowane zarówno do ukrywania, jak i pokazywania

Struktura obiektu to:delay: { "show": 500, "hide": 100 }
html logiczne fałszywy Wstaw kod HTML do popovera. Jeśli false, metoda jQuery textzostanie użyta do wstawienia treści do DOM. Użyj tekstu, jeśli martwisz się atakami XSS.
umieszczenie ciąg | funkcjonować 'prawo'

Jak ustawić popover - auto | góra | dół | lewo | prawo.
Gdy autojest określony, dynamicznie zmieni orientację popovera.

Gdy funkcja jest używana do określenia położenia, jest wywoływana z węzłem DOM popover jako pierwszym argumentem i węzłem DOM elementu wyzwalającego jako drugim. Kontekst thisjest ustawiony na instancję popover.
selektor ciąg | fałszywy fałszywy Jeśli podano selektor, obiekty popover zostaną delegowane do określonych celów. W praktyce jest to używane, aby umożliwić dynamicznej zawartości HTML dodawanie okienek popover. Zobacz to i przykład informacyjny .
szablon strunowy '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Podstawowy kod HTML do użycia podczas tworzenia popovera.

Popover titlezostanie wstrzyknięty do .popover-header.

Popover contentzostanie wstrzyknięty do .popover-body.

.arrowstanie się strzałką popovera.

Najbardziej zewnętrzny element opakowania powinien mieć .popoverklasę.
tytuł ciąg | element | funkcjonować ''

Domyślna wartość tytułu, jeśli titleatrybut nie jest obecny.

Jeśli podana zostanie funkcja, zostanie wywołana z thisreferencją ustawioną na element, do którego dołączony jest popover.
cyngiel strunowy 'Kliknij' Jak uruchamia się popover - kliknij | najedź | skupić | podręcznik. Możesz przekazać wiele wyzwalaczy; oddziel je spacją. „Ręcznie” nie można łączyć z żadnym innym wyzwalaczem.
zrównoważyć numer | strunowy 0 Przesunięcie popovera względem jego celu. Więcej informacji można znaleźć w dokumentacji offsetowej Popper.js .
powrótMiejsce docelowe ciąg | szyk 'trzepnięcie' Zezwalaj na określenie, której pozycji Popper użyje w przypadku powrotu. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją dotyczącą zachowania Popper.js
granica ciąg | element 'przewiń Rodzic' Granica ograniczenia przepełnienia popovera. Akceptuje wartości 'viewport', 'window', 'scrollParent'lub odwołania HTMLElement (tylko JavaScript). Aby uzyskać więcej informacji, zapoznaj się z dokumentacją PreventOverflow Popper.js .

Atrybuty danych dla poszczególnych okienek popover

Opcje dla poszczególnych okienek popover można alternatywnie określić za pomocą atrybutów danych, jak wyjaśniono powyżej.

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji.

$().popover(options)

Inicjuje popovery dla kolekcji elementów.

.popover('show')

Ujawnia popover elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem popovera (tj. przed shown.bs.popoverwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover. Popovery, których zarówno tytuł, jak i treść mają zerową długość, nigdy nie są wyświetlane.

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

.popover('hide')

Ukrywa popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie ukryty (tj. przed hidden.bs.popoverwystąpieniem zdarzenia). Jest to uważane za „ręczne” wyzwalanie popover.

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

.popover('toggle')

Przełącza popover elementu. Powraca do dzwoniącego, zanim popover został faktycznie wyświetlony lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.popoverlub ). hidden.bs.popoverJest to uważane za „ręczne” wyzwalanie popover.

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

.popover('dispose')

Ukrywa i niszczy popover elementu. Popovery korzystające z delegowania (utworzone za pomocą opcji selector) nie mogą być indywidualnie niszczone w potomnych elementach wyzwalających.

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

.popover('enable')

Daje możliwość pokazania popoverowi elementu. Popovery są domyślnie włączone.

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

.popover('disable')

Usuwa możliwość wyświetlania popovera elementu. Popover będzie można wyświetlić tylko wtedy, gdy zostanie ponownie włączony.

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

.popover('toggleEnabled')

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

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

.popover('update')

Aktualizuje pozycję popovera elementu.

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

Wydarzenia

Typ wydarzenia Opis
pokaż.bs.popover To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia.
pokazano.bs.popover To zdarzenie jest uruchamiane, gdy popover jest widoczny dla użytkownika (poczeka na zakończenie przejścia CSS).
ukryj.bs.popover To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody wystąpienia.
ukryta.bs.popover To zdarzenie jest uruchamiane po zakończeniu ukrywania popovera przed użytkownikiem (poczeka na zakończenie przejścia CSS).
wstawiony.bs.popover To zdarzenie jest wywoływane po show.bs.popoverzdarzeniu, gdy szablon popover został dodany do DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})