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;

}

*******************************/