Havalı ve Şık görünümlü CSS Tooltip
11 yıl önce tooltip stylish 7419
Web tasarımlarda şık görünümlü tooltip ile detayları göstermeyi seviyorsanız, bu kodları ve demo'yu mutlaka inceleyin.Adım 1
Önce jQuery ve sBubble scriptlerini ekliyoruz.
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.sBubble-0.1.1.js"></script>
Adım 2
sBubble için CSS dosyasını ekliyoruz.
<link rel="stylesheet" href="css/jquery.sBubble-0.1.1.css" />
Adım 3
sBubble plugin metodunu çağırıyoruz.
$('#targetElement').sBubble({
content: 'Add content for sBubble...',
width : 100, //Anlamı: '100px'
height : 20
});
Content seçeneği mecburidir ve #targetElement'in üstünde beliren tooltip'in innerHTML'idir.
width ve height opsiyoneldir ve birimleri pixel'dir. Default windth/height ölçüsü 120px/60px'dir. İçeriğe göre en/boy ölçüsü ayarlanmalıdır.
Tooltip pozisyonu
Default tooltip pozisyonu top (üst)'tür. Pozisyonu right(sağ), bottom(alt) ve left(sol) olarak ayarlayabilirsiniz.
$('#targetElement').sBubble({
content : 'Tooltip on right',
position: 'right', //Diğer seçenekler bottom(alt), left(sol), top(üst)
height : 19,
width : 100
});
Position Offset
Tooltip pozisyonuna topOffset ve leftOffset seçenekleri ile ince ayar çekebilirsiniz.
$('#targetElement').sBubble({
content : 'Tooltip on right',
position : 'right',
height : 19,
width : 100,
leftOffset: 10 //Anlamı: '10px'
});
Şu kuralı unutmayın : topOffset'deki artı değer tooltip'i aşağı kaydırır, eksi değer yukarı kaydırır.
Aynı şekilde leftOffset'deki artı değer sağa kaydırır, eksi değer sola kaydırır.
Tooltip Theme
Tooltip'in default rengi siyahtır fakat 3 rengi daha vardır (yeşil, mavi ve oranj). Renkleri theme seçeneğini kullanarak değiştirebilirsiniz.
$('#targetElement').sBubble({
content : 'Tooltip on Top',
height : 19,
width : 100,
theme : 'orange'
});
Theme özelleştirme
Özelleştirmeyi sadece CSS ile yapabilirsiniz. Tek yapmanız gereken, yeni bir CSS theme sınıfı oluşturmaktır. Aşağıda bununla ilgili bir örnek vardır.
.sBubble.myTheme {
background: #D600E5;
border-color: #91009B;
box-shadow: 0 0 12px #666, inset 0 0 30px #9D00A8;
}
.sBubbleArw.top.myTheme {
border-top-color: #91009B;
}
.sBubbleArw.bottom.myTheme {
border-bottom-color: #91009B;
}
.sBubbleArw.left.myTheme {
border-left-color: #91009B;
}
.sBubbleArw.right.myTheme {
border-right-color: #91009B;
}
Yukarıdaki örnekte myTheme adında yeni bir sınıf oluşturduk.
Tooltip'in ok işaretini kaldırmak
sBubbleArw ile ilişkili stilleri kaldırdığınız zaman, ok işaretini de kaldırmış olursunuz.
.sBubble.myTheme {
background: #D600E5;
border-color: #91009B;
box-shadow: 0 0 12px #666, inset 0 0 30px #9D00A8;
}
/***** Remove These Styles *****/
/*******************************
.sBubbleArw.top.myTheme {
border-top-color: #91009B;
}
.sBubbleArw.bottom.myTheme {
border-bottom-color: #91009B;
}
.sBubbleArw.left.myTheme {
border-left-color: #91009B;
}
.sBubbleArw.right.myTheme {
border-right-color: #91009B;
}
*******************************/
DEMO | Dosyalar