Tekin Grafiker

Havalı ve Şık görünümlü CSS Tooltip

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

Benzer Aramalar: Havalı ve Şık görünümlü CSS Tooltip, css, şık css stilleri,