Bootstrap - Araç İpucu Eklentisi

Araç ipuçları, bir bağlantıyı açıklamanız gerektiğinde kullanışlıdır. Eklenti, Jason Frame tarafından yazılan jQuery.tipsy eklentisinden esinlenmiştir . Araç ipuçları o zamandan beri resimler olmadan çalışmak, bir CSS animasyonu ile canlandırmak ve yerel başlık depolaması için veri nitelikleri ile güncellendi.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak tooltip.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

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 öğesinin arkasına yerleştirir. Aşağıdaki iki şekilde araç ipuçları ekleyebilirsiniz -

  • Via data attributes - Bir araç ipucu eklemek için şunu ekleyin data-toggle = "tooltip"bir bağlantı etiketine. Bağlantının başlığı, bir araç ipucunun metni olacaktır. Varsayılan olarak, araç ipucu eklenti tarafından en üste ayarlanmıştır.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
  • Via JavaScript - Araç ipucunu JavaScript aracılığıyla tetikleyin -

$('#identifier').tooltip(options)

Araç ipucu eklentisi, önceki bölümlerde tartışılan açılır menü veya diğer eklentiler gibi yalnızca css eklentileri DEĞİLDİR. Bu eklentiyi kullanmak için onu jquery kullanarak etkinleştirmelisiniz (javascript okuyun). Sayfanızdaki tüm araç ipuçlarını etkinleştirmek için sadece bu komut dosyasını kullanın -

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

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını gösterir.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Seçenekler

Bootstrap Data API aracılığıyla eklenebilecek veya JavaScript aracılığıyla çağrılabilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

Seçenek Adı Tür / Varsayılan Değer Veri özelliği adı Açıklama
animasyon boolean Varsayılanı: true veri animasyonu Araç ipucuna bir CSS soldurma geçişi uygular.
html boolean Varsayılanı: false data-html Araç ipucuna HTML ekler. Yanlışsa, jQuery'nin metin yöntemi etki alanına içerik eklemek için kullanılacaktır. XSS saldırıları konusunda endişeliyseniz metin kullanın.
yerleştirme string | function Varsayılan: top veri yerleştirme

Araç ipucunun nasıl konumlandırılacağını belirtir (yani, üst | alt | sol | sağ | otomatik).

Ne zaman otomatik belirtilmişse, dinamik araç ipucu reorient edecektir. Örneğin, yerleşim "otomatik sol" ise, araç ipucu mümkün olduğunda solda görüntülenir, aksi takdirde sağda görüntülenir.

seçici string Varsayılan: yanlış veri seçici Bir seçici sağlanırsa, araç ipucu nesneleri belirtilen hedeflere delege edilecektir.
Başlık string | varsayılan işlev : " veri başlığı Başlık seçeneği, başlık özelliği yoksa varsayılan başlık değeridir .
tetiklemek string Varsayılan: 'vurgulu odak' veri tetikleyici Araç ipucunun nasıl tetikleneceğini tanımlar: click| hover | focus | manual. Birden çok tetikleyici geçebilirsiniz; onları bir boşlukla ayırın.
içerik string | işlev Varsayılanı: '' veri içeriği Data-content özelliği yoksa varsayılan içerik değeri
gecikme numara | nesne Varsayılanı: 0 veri gecikmesi

Araç ipucunu ms cinsinden gösterme ve gizleme gecikmeleri - manuel tetikleme türü için geçerli değildir. Bir numara verilirse, hem gizleme hem de gösterme için gecikme uygulanır. Nesne yapısı -

delay: { show: 500, hide: 100 }
konteyner string | false Varsayılan: yanlış veri kabı Araç ipucunu belirli bir öğeye ekler. Örnek: container: 'body'

Yöntemler

Aşağıda, araç ipuçları için bazı yararlı yöntemler verilmiştir -

Yöntem Açıklama Misal

Options - .tooltip (seçenekler)

Bir öğe koleksiyonuna bir araç ipucu işleyicisi ekler.
$().tooltip(options)

Toggle - .tooltip ('geçiş')

Bir öğenin ipucunu değiştirir.
$('#element').tooltip('toggle')

Show - .tooltip ('göster')

Bir öğenin araç ipucunu gösterir.
$('#element').tooltip('show')

Hide - .tooltip ('gizle')

Bir öğenin araç ipucunu gizler.
$('#element').tooltip('hide')

Destroy - .tooltip ('yok et')

Bir öğenin araç ipucunu gizler ve yok eder.
$('#element').tooltip('destroy')

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını gösterir.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Etkinlikler

Aşağıdaki tablo, araç ipucu eklentisiyle çalışılacak olayları listeler. Bu olay, işleve bağlanmak için kullanılabilir.

Etkinlik Açıklama Misal
show.bs.tooltip Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
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).
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip Bu olay, hide örneği yöntemi çağrıldığında hemen tetiklenir.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip Bu olay, araç ipucunun kullanıcıdan gizlenmesi bittiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Misal

Aşağıdaki örnek, araç ipucu eklentisinin veri öznitelikleri aracılığıyla kullanımını gösterir.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>