Source

popovers

iOS'ta bulunanlar gibi Bootstrap açılır pencerelerini sitenizdeki herhangi bir öğeye eklemek için belgeler ve örnekler.

genel bakış

Popover eklentisini kullanırken bilmeniz gerekenler:

  • Popover'lar, konumlandırma için 3. taraf kitaplığı Popper.js'ye güvenir . Popper'ların çalışması için bootstrap.js'den önce popper.min.js'yibootstrap.bundle.min.js eklemeniz veya Popper.js'yi içeren / kullanmanız gerekir bootstrap.bundle.js!
  • Popover'lar, araç ipucu eklentisini bir bağımlılık olarak gerektirir.
  • JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .
  • Popover'lar performans nedenleriyle etkinleştirilir, bu nedenle bunları kendiniz başlatmanız gerekir .
  • Sıfır uzunluk titleve contentdeğerler hiçbir zaman bir popover göstermez.
  • container: 'body'Daha karmaşık bileşenlerde (giriş gruplarımız, düğme gruplarımız vb.) oluşturma sorunlarını önlemek için belirtin .
  • Gizli öğelerde popover'ları tetiklemek işe yaramaz.
  • .disabledveya öğeleri için disabledaçılır öğeler, bir sarmalayıcı öğede tetiklenmelidir.
  • Birden çok çizgiyi saran bağlantılardan tetiklendiğinde, açılır öğeler bağlantıların toplam genişliği arasında ortalanır. Bu davranıştan kaçınmak white-space: nowrap;için s üzerinde kullanın .<a>
  • Popover'lar, karşılık gelen öğeleri DOM'dan kaldırılmadan önce gizlenmelidir.

Popover'ların bazı örneklerle nasıl çalıştığını görmek için okumaya devam edin.

Örnek: Her yerde açılır pencereleri etkinleştir

Bir sayfadaki tüm açılır pencereleri başlatmanın bir yolu, onları data-toggleözniteliklerine göre seçmektir:

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

Örnek: containerSeçeneği kullanma

Bir üst öğede, bir açılır öğeye müdahale eden bazı stilleriniz olduğunda, containeraçılır öğenin HTML'sinin bunun yerine o öğenin içinde görünmesi için bir özel belirtmek isteyeceksiniz.

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

Örnek

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

dört yön

Dört seçenek mevcuttur: üst, sağ, alt ve sola hizalı.

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

Sonraki tıklamada kapat

focusKullanıcının geçiş öğesinden farklı bir öğeyi bir sonraki tıklamasında açılır pencereleri kapatmak için tetikleyiciyi kullanın .

Bir sonraki tıklamada kapatma için özel işaretleme gerekli

Uygun çapraz tarayıcı ve platformlar arası davranış için etiketi değil etiketi kullanmanız ve <a>ayrıca bir<button> öznitelik eklemeniz gerekir tabindex.

kapatılabilir 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'
})

Devre dışı bırakılmış öğeler

Özniteliğe sahip öğeler disabledetkileşimli değildir, yani kullanıcılar bir açılır pencereyi (veya araç ipucunu) tetiklemek için üzerine gelemez veya tıklayamaz. <div>Geçici bir çözüm olarak, bir sarmalayıcıdan açılır pencereyi tetiklemek veya devre dışı bırakılmış öğedeki öğeyi <span>geçersiz kılmak isteyeceksiniz pointer-events.

Devre dışı bırakılmış popover tetikleyicileri için, popover'ın, devre dışı bırakılmış bir öğeye tıklamayıdata-trigger="hover" beklemeyebilecekleri için kullanıcılarınıza anında görsel geri bildirim olarak görünmesini de tercih edebilirsiniz .

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

kullanım

JavaScript aracılığıyla açılır pencereleri etkinleştirin:

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

İsim Tip Varsayılan Tanım
animasyon boole doğru Popover'a bir CSS solma geçişi uygulayın
konteyner dize | eleman | yanlış yanlış

Popover'ı belirli bir öğeye ekler. Örnek: container: 'body'. Bu seçenek özellikle, açılır pencereyi belge akışında tetikleyici öğenin yanına yerleştirmenize izin verdiği için yararlıdır - bu, pencerenin yeniden boyutlandırılması sırasında açılır pencerenin tetikleyici öğeden uzaklaşmasını önleyecektir.
içerik dize | eleman | işlev ''

data-contentÖznitelik yoksa varsayılan içerik değeri .

Bir fonksiyon verilirse, thispopover'ın eklendiği öğeye referansı ile çağrılır.
gecikme sayı | nesne 0

Popover'ı (ms) gösterme ve gizleme gecikmesi - manuel tetik tipi için geçerli değildir

Bir numara verilirse, her iki gizleme/gösterme için gecikme uygulanır.

Nesne yapısı:delay: { "show": 500, "hide": 100 }
html boole yanlış Popover'a HTML ekleyin. Yanlışsa text, DOM'a içerik eklemek için jQuery'nin yöntemi kullanılacaktır. XSS saldırılarından endişe ediyorsanız metin kullanın.
atama dize | işlev 'Sağ'

Popover nasıl konumlandırılır - auto | üst | alt | sol | Sağ. Belirtildiğinde, popover'ı dinamik olarak yeniden yönlendirir
.auto

Yerleşimi belirlemek için bir işlev kullanıldığında, ilk argüman olarak popover DOM düğümü ve ikinci argüman olarak tetikleyici öğe DOM düğümü ile çağrılır. Bağlam this, popover örneğine ayarlanır.
seçici dize | yanlış yanlış Bir seçici sağlanırsa, popover nesneleri belirtilen hedeflere devredilecektir. Pratikte bu, dinamik HTML içeriğinin açılır pencerelerin eklenmesini sağlamak için kullanılır. Buna ve bilgilendirici bir örneğe bakın .
şablon sicim '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Popover oluştururken kullanılacak temel HTML.

Popover'lar . title_.popover-header

Popover'lar . content_.popover-body

.arrowpopover'ın oku olacak.

En dıştaki sarmalayıcı öğenin .popoversınıfı olmalıdır.
Başlık dize | eleman | işlev ''

titleÖznitelik yoksa varsayılan başlık değeri .

Bir fonksiyon verilirse, thispopover'ın eklendiği öğeye referansı ile çağrılır.
tetiklemek sicim 'Tıklayın' Popover nasıl tetiklenir - tıklayın | üzerine gelin | odak | Manuel. Birden çok tetikleyici iletebilirsiniz; boşlukla ayırın. "manuel" başka bir tetikleyici ile birleştirilemez.
telafi etmek sayı | sicim 0 Popover'ın hedefine göre ofseti. Daha fazla bilgi için Popper.js'nin ofset belgelerine bakın .
geri dönüşYerleşim dize | dizi 'çevirmek' Popper'ın geri dönüşte hangi konumu kullanacağını belirlemeye izin verin. Daha fazla bilgi için Popper.js'nin davranış belgelerine bakın.
sınır dize | eleman 'kaydırmaEbeveyn' Popover'ın taşma kısıtlaması sınırı. 'viewport', 'window', 'scrollParent', veya bir HTMLElement başvurusunun değerlerini kabul eder (yalnızca JavaScript). Daha fazla bilgi için Popper.js'nin önlemeOverflow belgelerine bakın .

Bireysel popover'lar için veri öznitelikleri

Bireysel popover'lar için seçenekler alternatif olarak yukarıda açıklandığı gibi veri öznitelikleri kullanılarak belirlenebilir.

yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın.

$().popover(options)

Bir öğe koleksiyonu için açılır pencereleri başlatır.

.popover('show')

Bir öğenin popover'ını ortaya çıkarır. Popover fiilen gösterilmeden önce (yani shown.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir. Hem başlığı hem de içeriği sıfır uzunlukta olan popover'lar hiçbir zaman görüntülenmez.

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

.popover('hide')

Bir öğenin açılır penceresini gizler. Popover fiilen gizlenmeden (yani hidden.bs.popoverolay meydana gelmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

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

.popover('toggle')

Bir öğenin açılır penceresini değiştirir. Popover fiilen gösterilmeden veya gizlenmeden (yani shown.bs.popoverveya hidden.bs.popoverolayı gerçekleşmeden önce) arayana geri döner. Bu, popover'ın "manuel" tetiklenmesi olarak kabul edilir.

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

.popover('dispose')

Bir öğenin popover'ını gizler ve yok eder. Temsilci kullanan (seçenek kullanılarak oluşturulan) popover'lar, alttan gelen selectortetikleyici öğelerde tek tek yok edilemez.

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

.popover('enable')

Bir öğenin popover'ına gösterilme yeteneği verir. Popover'lar varsayılan olarak etkindir.

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

.popover('disable')

Bir öğenin popover'ının gösterilmesi yeteneğini kaldırır. Popover yalnızca yeniden etkinleştirildiğinde gösterilebilir.

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

.popover('toggleEnabled')

Bir öğenin açılır penceresinin gösterilme veya gizlenme özelliğini değiştirir.

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

.popover('update')

Bir öğenin açılır penceresinin konumunu günceller.

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

Olaylar

Etkinlik tipi Tanım
show.bs.popover Bu olay, showörnek yöntemi çağrıldığında hemen tetiklenir.
Gösterilen.bs.popover Bu olay, açılır pencere kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
hide.bs.popover hideBu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
gizli.bs.popover Bu olay, açılır pencerenin kullanıcıdan gizlenmesi bittiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
eklenen.bs.popover Bu olay, show.bs.popoverpopover şablonu DOM'a eklendiğinde olaydan sonra tetiklenir. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})