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>