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 polegają na zewnętrznej bibliotece Popper do pozycjonowania. Musisz dołączyć popper.min.js przed bootstrap.js lub użyć bootstrap.bundle.min.js/ bootstrap.bundle.jsktóry zawiera Poppera, aby popovery działały!
• 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 .text-nowrapna swoim <a>s, aby uniknąć tego zachowania.
• Popovery muszą być ukryte, zanim odpowiadające im elementy zostaną usunięte z DOM.
• Popovery mogą być wyzwalane dzięki elementowi wewnątrz cienia 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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.

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

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Opcje

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

Metody

$().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 tytuł 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

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