Araç ipuçları

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

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:

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)

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

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

ile işlevi kullanmapopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

yöntemler

göstermek

Bir öğenin ipucunu ortaya çıkarır. Araç ipucu fiilen 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.

tooltip.show()

saklamak

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.

tooltip.hide()

geçiş

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.

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ı , selectorsoyundan 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

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()