Araç ipuçları
Animasyonlar için CSS3 ve yerel başlık depolaması için data-bs-öznitelikleri 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
- 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.
.disabled
veyadisabled
öğ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.
prefers-reduced-motion
ortam 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-bs-toggle
özelliklerine göre seçmektir:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Ö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. RTL'de Bootstrap kullanılırken yönergeler yansıtılır.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Ve özel HTML eklendi:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Bir SVG ile:
küstah
Değişkenler
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
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:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
taşma auto
vescroll
Araç ipucu konumu, bir üst kapsayıcı bizim gibi olduğunda overflow: auto
veya overflow: scroll
bizim gibi olduğunda otomatik olarak değişmeye çalışır .table-responsive
, ancak yine de orijinal yerleşimin konumunu korur. Bunu çözmek için , varsayılan değeri geçersiz kılmak için boundary
seçeneği (seçeneği kullanan çevirme değiştiricisi için ) herhangi bir HTMLElement olarak ayarlayın , örneğin :popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
İşaretleme
Bir araç ipucu için gerekli işaretleme yalnızca bir data
niteliktir ve title
HTML öğesinde bir araç ipucuna sahip olmak istersiniz. Bir araç ipucunun oluşturulan işaretlemesi, bir konum gerektirmesine rağmen (varsayılan olarak, top
eklenti 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-bs-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="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
Devre dışı bırakılmış öğeler
Özniteliğe sahip öğeler disabled
etkileşimli değildir, yani kullanıcılar bir araç ipucunu (veya açılır pencereyi) tetiklemek için odaklanamaz, üzerine gelemez veya tıklayamaz. Geçici bir çözüm olarak, araç ipucunu bir sarmalayıcıdan tetiklemek isteyeceksiniz <div>
veya <span>
ideal olarak tabindex="0"
.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" 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-bs-
gibi ekleyin data-bs-animation=""
. Seçenekleri veri öznitelikleri aracılığıyla geçirirken, seçenek adının case tipini camelCase'den kebab-case olarak değiştirdiğinizden emin olun. Örneğin, data-bs-customClass="beautifier"
kullanmak yerine data-bs-custom-class="beautifier"
.
sanitize
,
sanitizeFn
, ve
allowList
seçeneklerinin veri öznitelikleri kullanılarak sağlanamayacağını unutmayın.
İsim | Tip | Varsayılan | Tanım |
---|---|---|---|
animation |
boole | true |
Araç ipucuna bir CSS soldurma geçişi uygulayın |
container |
dize | eleman | yanlış | false |
Araç ipucunu belirli bir öğeye ekler. Örnek: |
delay |
sayı | nesne | 0 |
Araç ipucunu (ms) gösterme ve gizleme gecikmesi - manuel tetikleme türü için geçerli değildir Bir numara verilirse, her iki gizleme/gösterme için gecikme uygulanır. Nesne yapısı: |
html |
boole | false |
Araç ipucunda HTML'ye izin verin. Doğruysa, araç ipucundaki HTML etiketleri araç ipucunda XSS saldırılarından endişe ediyorsanız metin kullanın. |
placement |
dize | işlev | 'top' |
Araç ipucu nasıl konumlandırılır - auto | üst | alt | sol | Sağ. Belirtildiğinde, araç ipucunu dinamik olarak yeniden yönlendirir 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 |
selector |
dize | yanlış | false |
Bir seçici sağlanırsa, araç ipucu nesneleri belirtilen hedeflere devredilecektir. Pratikte bu, dinamik olarak eklenen DOM öğelerine ( jQuery.on destek) araç ipuçlarını uygulamak için de kullanılır. Buna ve bilgilendirici bir örneğe bakın . |
template |
sicim | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Araç ipucunu oluştururken kullanılacak temel HTML. Araç ipucu
En dıştaki sarmalayıcı öğe, ve |
title |
dize | eleman | işlev | '' |
|
trigger |
sicim | 'hover focus' |
Araç ipucu nasıl tetiklenir - tıklayın | üzerine gelin | odak | Manuel. Birden çok tetikleyici iletebilirsiniz; boşlukla ayırın.
|
fallbackPlacements |
dizi | ['top', 'right', 'bottom', 'left'] |
Dizideki yerleşimlerin bir listesini sağlayarak (tercih sırasına göre) yedek yerleşimleri tanımlayın. Daha fazla bilgi için Popper'ın davranış belgelerine bakın. |
boundary |
dize | eleman | 'clippingParents' |
Araç ipucunun taşma kısıtlaması sınırı (yalnızca Popper'ın önlemeOverflow değiştiricisi için geçerlidir). Varsayılan olarak 'clippingParents' bir HTMLElement referansını kabul eder ve kabul edebilir (yalnızca JavaScript aracılığıyla). Daha fazla bilgi için Popper'ınDetectOverflow belgelerine bakın . |
customClass |
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: Ek sınıf adları içeren tek bir dize döndürmesi gereken bir işlevi de iletebilirsiniz. |
sanitize |
boole | true |
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 . |
allowList |
nesne | Varsayılan değer | İzin verilen öznitelikleri ve etiketleri içeren nesne |
sanitizeFn |
boş | işlev | null |
Burada kendi sterilize etme işlevinizi sağlayabilirsiniz. Sanitasyon yapmak için özel bir kitaplık kullanmayı tercih ediyorsanız bu yararlı olabilir. |
offset |
dizi | dize | işlev | [0, 0] |
Araç ipucunun hedefine göre ofseti. Aşağıdaki gibi virgülle ayrılmış değerlerle veri özniteliklerinde bir dize iletebilirsiniz: Ofseti belirlemek için bir fonksiyon kullanıldığında, ilk argümanı olarak popper yerleşimini, referansı ve popper rect'lerini içeren bir nesne ile çağrılır. Tetikleyici öğe DOM düğümü, ikinci argüman olarak iletilir. İşlev, iki sayı içeren bir dizi döndürmelidir: . Daha fazla bilgi için Popper'ın ofset belgelerine bakın . |
popperConfig |
boş | nesne | işlev | null |
Bootstrap'in varsayılan Popper yapılandırmasını değiştirmek için, Popper'ın yapılandırmasına bakın . Popper konfigürasyonunu oluşturmak için bir fonksiyon kullanıldığında, Bootstrap'in varsayılan Popper konfigürasyonunu içeren bir nesne ile çağrılır. Varsayılanı kendi yapılandırmanızla kullanmanıza ve birleştirmenize yardımcı olur. İşlev, Popper için bir yapılandırma nesnesi döndürmelidir. |
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.
ile işlevi kullanmapopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
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 .
göstermek
Bir öğenin ipucunu ortaya çıkarır. Araç ipucu fiilen gösterilmeden önce (yani shown.bs.tooltip
olay 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.
tooltip.show()
saklamak
Bir öğenin ipucunu gizler. Araç ipucu gizlenmeden (yani hidden.bs.tooltip
olay gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.
tooltip.hide()
geçiş
Bir öğenin ipucunu değiştirir. Araç ipucu gerçekten gösterilmeden veya gizlenmeden (yani shown.bs.tooltip
veya hidden.bs.tooltip
olayı gerçekleşmeden önce) arayana geri döner. Bu, araç ipucunun "manuel" tetiklenmesi olarak kabul edilir.
tooltip.toggle()
elden çıkarmak
Bir öğenin ipucunu gizler ve yok eder (DOM öğesinde depolanan verileri kaldırır). Temsilci kullanan (seçenek kullanılarak oluşturulan) araç ipuçları , selector
soyundan gelen tetikleyici öğelerde tek tek yok edilemez.
tooltip.dispose()
etkinleştirme
Bir öğenin ipucuna gösterilme yeteneği verir. Araç ipuçları varsayılan olarak etkindir.
tooltip.enable()
devre dışı bırakmak
Bir öğenin ipucunun gösterilme özelliğini kaldırır. Araç ipucu yalnızca yeniden etkinleştirildiğinde gösterilebilir.
tooltip.disable()
toggleEnabled
Bir öğenin ipucunun gösterilme veya gizlenme özelliğini değiştirir.
tooltip.toggleEnabled()
Güncelleme
Bir öğenin ipucunun konumunu günceller.
tooltip.update()
getInstance
Bir DOM öğesiyle ilişkili araç ipucu örneğini almanızı sağlayan statik yöntem
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
Bir DOM öğesiyle ilişkili araç ipucu örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza olanak tanıyan statik yöntem
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Olaylar
Etkinlik tipi | Tanım |
---|---|
show.bs.tooltip |
Bu olay, show örnek yöntemi çağrıldığında hemen tetiklenir. |
shown.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 |
hide Bu olay, örnek yöntemi çağrıldığında hemen tetiklenir . |
hidden.bs.tooltip |
Bu olay, ipucu kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
inserted.bs.tooltip |
Bu olay, show.bs.tooltip araç ipucu şablonu DOM'a eklendiğinde olaydan sonra tetiklenir. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()