in English

Araç ipuçları

Yerel başlık depolaması için animasyonlar ve veri öznitelikleri için CSS3 kullanarak CSS ve JavaScript ile özel Bootstrap araç ipuçları eklemeye yönelik belgeler ve örnekler.

genel bakış

Araç ipucu eklentisini kullanırken bilmeniz gerekenler:

  • Araç ipuçları, konumlandırma için 3. taraf kitaplığı Popper'a güvenir . Araç ipuçlarının çalışması için popper.min.js'yi bootstrap.js'den önce eklemeli veya Popper içeren bootstrap.bundle.min.js/ kullanmalısınız!bootstrap.bundle.js
  • JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .
  • Araç ipuçları, performans nedenleriyle etkinleştirilir, bu nedenle bunları kendiniz başlatmanız gerekir .
  • Sıfır uzunlukta başlıklara sahip araç ipuçları hiçbir zaman görüntülenmez.
  • 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 araç ipuçlarını tetiklemek işe yaramaz.
  • .disabledveya disabledöğeler için araç ipuçları , bir sarmalayıcı öğede tetiklenmelidir.
  • Birden çok satıra yayılan köprülerden tetiklendiğinde, araç ipuçları ortalanır. Bu davranıştan kaçınmak white-space: nowrap;için s üzerinde kullanın .<a>
  • Araç ipuçları, karşılık gelen öğeleri DOM'dan kaldırılmadan önce gizlenmelidir.
  • Gölge DOM içindeki bir öğe sayesinde araç ipuçları tetiklenebilir.
Varsayılan olarak, bu bileşen, açıkça izin verilmeyen tüm HTML öğelerini çıkaran yerleşik içerik temizleyiciyi kullanır. Daha fazla ayrıntı için JavaScript belgelerimizdeki dezenfektan bölümüne bakın.
Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Hepsini anladın mı? Harika, bazı örneklerle nasıl çalıştıklarını görelim.

Örnek: Araç ipuçlarını her yerde etkinleştirin

Bir sayfadaki tüm araç ipuçlarını başlatmanın bir yolu, onları data-toggleözelliklerine göre seçmektir:

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

Örnekler

Araç ipuçlarını görmek için aşağıdaki bağlantıların üzerine gelin:

Araç ipuçlarıyla birlikte bazı satır içi bağlantıları göstermek için yer tutucu metin . Bu artık sadece dolgu, katil yok. Yalnızca gerçek metnin varlığını taklit etmek için buraya yerleştirilen içerik . Ve tüm bunlar, size gerçek dünyadaki durumlarda kullanıldığında araç ipuçlarının nasıl görüneceği hakkında bir fikir vermek için. Bu nedenle , bağlantılarla ilgili bu ipuçlarının, bunları kendi sitenizde veya projenizde kullandıktan sonra pratikte nasıl çalışabileceğini umarız şimdi görmüşsünüzdür .

Dört araç ipucu yönünü görmek için aşağıdaki düğmelerin üzerine gelin: üst, sağ, alt ve sol.

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

Ve özel HTML eklendi:

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

kullanım

Araç ipucu eklentisi, isteğe bağlı olarak içerik ve işaretleme oluşturur ve varsayılan olarak araç ipuçlarını tetikleyici öğelerinden sonra yerleştirir.

Araç ipucunu JavaScript aracılığıyla tetikleyin:

$('#example').tooltip(options)
taşma autovescroll

overflow: autoAraç ipucu konumu, bir üst kapsayıcı bizim gibi olduğunda veya overflow: scrollbizim gibi olduğunda otomatik olarak değişmeye çalışır .table-responsive, ancak yine de orijinal yerleşimin konumunu korur. Çözümlemek için boundaryseçeneği varsayılan değer dışında herhangi bir değere ayarlayın 'scrollParent', örneğin 'window':

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

İşaretleme

Bir araç ipucu için gerekli işaretleme yalnızca bir dataniteliktir ve titleHTML öğesinde bir araç ipucuna sahip olmak istersiniz. Bir araç ipucunun oluşturulan işaretlemesi, bir konum gerektirmesine rağmen (varsayılan olarak, topeklenti tarafından ayarlanır) oldukça basittir.

Araç ipuçlarını klavye ve yardımcı teknoloji kullanıcıları için çalıştırma

Yalnızca geleneksel olarak klavye odaklı ve etkileşimli (bağlantılar veya form denetimleri gibi) HTML öğelerine araç ipuçları eklemelisiniz. <span>Nitelik eklenerek isteğe bağlı HTML öğeleri (s gibi ) odaklanabilir hale getirilebilse de tabindex="0", bu, klavye kullanıcıları için etkileşimli olmayan öğeler üzerinde potansiyel olarak can sıkıcı ve kafa karıştırıcı sekme durakları ekleyecektir ve çoğu yardımcı teknoloji şu anda bu durumda araç ipucunu açıklamamaktadır. Ek olarak, yalnızca araç ipucunuz için tetikleyici olarak güvenmeyin hover, çünkü bu, araç ipuçlarınızın klavye kullanıcıları için tetiklenmesini imkansız hale getirecektir.

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

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

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

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

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

Güvenlik nedenleriyle sanitize, sanitizeFnve whiteListseçeneklerinin veri öznitelikleri kullanılarak sağlanamayacağını unutmayın.
İsim Tip Varsayılan Tanım
animasyon boole doğru Araç ipucuna bir CSS soldurma geçişi uygulayın
konteyner dize | eleman | yanlış yanlış

Araç ipucunu belirli bir öğeye ekler. Örnek: container: 'body'. Bu seçenek, araç ipucunu belge akışında tetikleyici öğenin yanına yerleştirmenize olanak sağladığı için özellikle yararlıdır - bu, pencere yeniden boyutlandırma sırasında araç ipucunun tetikleyici öğeden uzaklaşmasını önler.

gecikme sayı | nesne 0

Araç ipucunu (ms) gösterme ve gizleme gecikmesi - manuel tetik türü 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ış

Araç ipucunda HTML'ye izin verin.

Doğruysa, araç ipucundaki HTML etiketleri araç ipucunda titleişlenecektir. 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 'tepe'

Araç ipucu nasıl konumlandırılır - auto | üst | alt | sol | Sağ. Belirtildiğinde, araç ipucunu dinamik olarak yeniden yönlendirir
.auto

Yerleşimi belirlemek için bir işlev kullanıldığında, ilk argüman olarak araç ipucu DOM düğümü ve ikinci argüman olarak tetikleyici öğe DOM düğümü ile çağrılır. Bağlam this, araç ipucu örneğine ayarlanır.

seçici dize | yanlış yanlış Bir seçici sağlanırsa, araç ipucu nesneleri belirtilen hedeflere devredilecektir. Pratikte bu, dinamik olarak eklenen DOM öğelerine ( jQuery.ondestek) araç ipuçlarını uygulamak için de kullanılır. Buna ve bilgilendirici bir örneğe bakın .
şablon sicim '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Araç ipucunu oluştururken kullanılacak temel HTML.

Araç ipucu title, .tooltip-inner.

.arrowaraç ipucunun oku olacak.

En dıştaki sarmalayıcı öğe, ve .tooltipsınıfına sahip olmalıdır role="tooltip".

Başlık dize | eleman | işlev ''

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

thisBir fonksiyon verilirse, araç ipucunun eklendiği öğeye referans seti ile çağrılacaktır .

tetiklemek sicim 'vurgulu odak'

Araç ipucu nasıl tetiklenir - tıklayın | üzerine gelin | odak | Manuel. Birden çok tetikleyici iletebilirsiniz; boşlukla ayırın.

'manual'.tooltip('show')araç ipucunun , .tooltip('hide')ve .tooltip('toggle')yöntemleri aracılığıyla programlı olarak tetikleneceğini belirtir ; bu değer başka bir tetikleyici ile birleştirilemez.

'hover'kendi başına klavye aracılığıyla tetiklenemeyen araç ipuçlarıyla sonuçlanacaktır ve yalnızca klavye kullanıcıları için aynı bilgileri iletmek için alternatif yöntemler varsa kullanılmalıdır.

telafi etmek sayı | dize | işlev 0

Araç ipucunun hedefine göre ofseti.

Ofseti belirlemek için bir fonksiyon kullanıldığında, ilk argümanı olarak ofset verilerini içeren bir nesne ile çağrılır. İşlev, aynı yapıya sahip bir nesne döndürmelidir. Tetikleyici öğe DOM düğümü, ikinci argüman olarak iletilir.

Daha fazla bilgi için Popper'ın ofset belgelerine bakın .

geri dönüşYerleşim dize | dizi 'çevirmek' Popper'ın yedekte hangi konumu kullanacağını belirlemeye izin verin. Daha fazla bilgi için Popper'ın davranış belgelerine bakın.
özelSınıf dize | işlev ''

Gösterildiğinde araç ipucuna sınıflar ekleyin. Bu sınıfların, şablonda belirtilen sınıflara ek olarak ekleneceğini unutmayın. Birden çok sınıf eklemek için bunları boşluklarla ayırın: 'a b'.

Ek sınıf adları içeren tek bir dize döndürmesi gereken bir işlevi de iletebilirsiniz.

sınır dize | eleman 'kaydırmaEbeveyn' Araç ipucunun 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'ın önlemeOverflow belgelerine bakın .
sterilize etmek boole doğru Temizlemeyi etkinleştirin veya devre dışı bırakın. Etkinleştirilirse 'template've 'title'seçenekler sterilize edilecektir. JavaScript belgelerimizdeki dezenfektan bölümüne bakın .
beyaz liste nesne Varsayılan değer İzin verilen öznitelikleri ve etiketleri içeren nesne
sanitizeFn boş | işlev hükümsüz Burada kendi sterilize etme işlevinizi sağlayabilirsiniz. Sanitasyon yapmak için özel bir kitaplık kullanmayı tercih ediyorsanız bu yararlı olabilir.
popperConfig boş | nesne hükümsüz Bootstrap'in varsayılan Popper yapılandırmasını değiştirmek için, Popper'ın yapılandırmasına bakın

Bireysel araç ipuçları için veri öznitelikleri

Bireysel araç ipuç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 .

$().tooltip(options)

Bir öğe koleksiyonuna bir araç ipucu işleyicisi ekler.

.tooltip('show')

Bir öğenin ipucunu ortaya çıkarır. Araç ipucu gerçekten gösterilmeden önce (yani shown.bs.tooltipolay meydana gelmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir. Sıfır uzunlukta başlıklara sahip araç ipuçları hiçbir zaman görüntülenmez.

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

.tooltip('hide')

Bir öğenin ipucunu gizler. Araç ipucu gizlenmeden (yani hidden.bs.tooltipolay gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.

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

.tooltip('toggle')

Bir öğenin ipucunu değiştirir. Araç ipucu gerçekten gösterilmeden veya gizlenmeden (yani shown.bs.tooltipveya hidden.bs.tooltipolayı gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.

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

.tooltip('dispose')

Bir öğenin ipucunu gizler ve yok eder. Temsilci kullanan (seçenek kullanılarak oluşturulan) araç ipuçları , selectorsoyundan gelen tetikleyici öğelerde tek tek yok edilemez.

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

.tooltip('enable')

Bir öğenin ipucuna gösterilme yeteneği verir. Araç ipuçları varsayılan olarak etkindir.

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

.tooltip('disable')

Bir öğenin ipucunun gösterilme özelliğini kaldırır. Araç ipucu yalnızca yeniden etkinleştirildiğinde gösterilebilir.

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

.tooltip('toggleEnabled')

Bir öğenin ipucunun gösterilme veya gizlenme özelliğini değiştirir.

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

.tooltip('update')

Bir öğenin ipucunun konumunu günceller.

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

Olaylar

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