Araç ipuçları

genel bakış

Araç ipucu eklentisini kullanırken bilmeniz gerekenler:

• Araç ipuçları, konumlandırma için üçüncü taraf kitaplığı Popper'a güvenir . popper.min.js'yi önce eklemeli bootstrap.jsveya bootstrap.bundle.min.jsPopper içeren birini kullanmalısını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.

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

Örnekler

Araç ipuçlarını etkinleştir

Yukarıda belirtildiği gibi, kullanılmadan önce araç ipuçlarını başlatmanız gerekir. Bir sayfadaki tüm araç ipuçlarını başlatmanın bir yolu, bunları data-bs-toggleözniteliklerine göre seçmektir, örneğin:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Bağlantılarla ilgili ipuçları

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Özel araç ipuçları

CSS değişkenlerini kullanarak araç ipuçlarının görünümünü özelleştirebilirsiniz . data-bs-custom-class="custom-tooltip"Özel görünümümüzü kapsamak ve yerel bir CSS değişkenini geçersiz kılmak için kullanmak için özel bir sınıf belirledik .

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Talimatlar

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Bir SVG ile:

CSS

Değişkenler

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, araç ipuçları artık .tooltipgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sas değişkenleri

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-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 iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

ile işlevi kullanmapopperConfig

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

yöntemler

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Olaylar

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()