En son web geliştirme öğreticiler
 

Bootstrap JS İpucu

❮ Önceki Sonraki Referans ❯

JS ipucu (tooltip.js)

Ipucu eklentisi kullanıcı bir öğe üzerinde fare taşıdığındaki görünen küçük açılır kutusudur.

Tooltips hakkında bir eğitim için bizim okumak Bootstrap Tooltip Eğitimi .

Via data-* Özellikler

data-toggle="tooltip" ipucu aktif hale getirir.

title özniteliği araç ipucu içindeki görüntülenmesi gereken metin belirtilir.

Örnek

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Kendin dene "

JavaScript aracılığıyla

Araç ipuçları CSS salt eklentileri değildir ve bu nedenle jQuery ile ilklendirilmelidir: Belirtilen elemanı seçmek ve çağrı tooltip() yöntemini.

Örnek

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Kendin dene "

tooltip Seçenekler

Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. Veri özelliklerini için seçeneği adını ekler data- olduğu gibi data-placement="" .

isim tip Varsayılan Açıklama Dene
animationbooleantrue

gösteren ve araç ipucu gizleme zaman CSS solma geçiş efekti ekleme belirtir

  • true - Bir solma efekti ekleyin
  • false - Bir solma efekti ekleme
Dene
konteyner dize veya boolean false yanlış Belirli bir elemana ipucunu ekler.
Örnek: kap: 'body' 		Dene
delaynumber, or object0 o göstermek ve araç ipucu gizlemek için alacak milisaniye sayısını belirtir.

gösteren bir gecikme ve gizleme başka bir belirtmek için nesne yapısını kullanmak:

delay: {show: 500, hide: 100} - göstermek için 500 ms sürer tooltip , ama sadece 100 ms saklamaya 		Dene
htmlboolean false araç ipucu HTML etiketlerini kabul edilip edilmeyeceğini belirtir:
  • true HTML etiketleri Kabul -
  • false - HTML etiketlerini kabul etmeyin
Not: HTML takılmalıdır title özniteliği (veya başlık seçeneğini kullanarak).

False olarak ayarlandığında (default) , jQuery's text() metodu kullanılır. Eğer XSS saldırıları endişe eğer bunu kullanın 		Dene
placementstring"top" Araç ipucu konumunu belirtir. Olası değerler:

  • "top" - üstte Tooltip
  • "bottom" - altta Tooltip
  • "left" - Tooltip soldaki
  • "right" - sağda Tooltip
  • "auto" - Tarayıcı araç ipucu konumunu karar sağlar. Değeri ise Örneğin, "auto left" aksi sağda, mümkün olduğunda ipucu sol tarafta gösterecektir. Değeri ise "auto bottom" , ipucu üstünde, aksi takdirde mümkün olduğunda altta görüntüler
Dene
selectorstring, or the boolean falsefalse Belirtilen seçicinin ipucunu ekler Dene
templatestring  araç ipucu oluştururken Taban HTML kullanmak.

Tooltip başlık sınıfı olan elemanın içine sokulacaktır .tooltip-inner ve sınıf ile elemanının .tooltip-arrow Tooltip en ok olacaktır.

En dış ambalaj elemanı olmalıdır .tooltip sınıfı.
titlestring"" araç ipucu içindeki görüntülenmesi gereken metni belirtir Dene
triggerstring"hover focus" Araç ipucu nasıl tetiklendiğini belirtir. Olası değerler:

  • "click" - bir tıklama ile araç ipucu Trigger
  • "hover" - Üzerine giderek ipucunu Trigger
  • "focus" - bu (sekme veya .eg tıklayarak) odağı aldığında araç ipucu Trigger
  • "manual" - elle ipucunu Trigger
İpucu: Birden çok değer geçirmek boşluk ile onları ayırmak için 		Dene
viewportstring, or object{selector: "body" , padding: 0} Bu elemanın sınırları içinde araç ipucu tutar.

Örnek: viewport: '#viewport' ya {selector: '#viewport', padding: 0}

İpucu Yöntemler

Aşağıdaki tabloda mevcut tüm araç ipucu yöntemlerini listeler.

Yöntem Açıklama Dene
. tooltip( options ) bir seçenek ipucunu etkinleştirir. Geçerli değerler için yukarıdaki seçeneklere bakın Dene
. tooltip("show") Araç ipucunu gösterir Dene
. tooltip("hide") Araç ipucunu gizler Dene
. tooltip("toggle") Araç ipucunu açar Dene
. tooltip("destroy") Gizler ve araç ipucunu yok eder Dene

İpucu Olaylar

Aşağıdaki tabloda mevcut tüm araç ipucu olaylarını listeler.

Olay Açıklama Dene
show.bs.tooltip ipucu gösterildiği üzere olan oluşur Dene
shown.bs.tooltip araç ipucu tam gösterildiğinde gerçekleşir (CSS geçişleri tamamladıktan sonra) Dene
hide.bs.tooltip Araç ipucu gizli üzeredir oluşur Dene
hidden.bs.tooltip araç ipucu tam gizlidir oluşur (CSS geçişleri tamamladıktan sonra) Dene
Örnekler

Örnekler

Özel İpucu Tasarım

araç ipucu görünümünü özelleştirmek için CSS kullanın:

Örnek

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Kendin dene "

❮ Önceki Sonraki Referans ❯