Tipsy: Tooltips ala Facebook Lagi

Tooltips? apa itu tooltips? The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over (Wikipedia). Secara sederhana, tooltips adalah informasi yang biasanya tampil dalam kotak yang muncul saat mouse melayang di atas tautan atau gambar. Tooltips biasanya digunakan untuk memerjelas perintah atau fungsi dari suatu link, tombol, atau pun isian yang ada pada sebuah aplikasi. Tooltips juga sering digunakan pada web maupun blog dengan fungsi yang sama. Secara default, dengan menambahkan kode title (title="judul") pada suatu link, tooltips akan muncul saat mouseover dengan tampilan yang sederhana. Silakan arahkan mouse Anda di sini.

facebook logo

Adalah Tipsy, sebuah tooltips dengan mesin jQuery yang mampu mengubah tampilan tooltips standar blog Anda menjadi lebih bergaya. (Bukankah Tipsy sudah pernah di bahas di blog ini? benar sekali) Merujuk pada tulisan sebelumnya, Tipsy: Toolstips ala Facebook, kali ini akan saya bahas lebih jauh tentang Tipsy, sekaligus sebagai perbaikan dan pengenalan versi terbaru dari Tipsy. Bagi Anda yang telah menerapkan Tipsy dengan panduan tulisan sebelumnya, silakan ganti semua kode yang ada dengan kode berikut untuk mendapatkan fitur terbaru (sebenarnya sudah lama :D) dari Tipsy, tapi sebelumnya mari kita perhatikan tabel berikut.

Northwest North Northeast
West   East
Southwest South Southeast

Seperti yang terlihat pada tabel, terdapat penambahan 4 gravity parameter baru, yaitu Northwest, Northeast, Southwest, dan Southeast. Perubahan ini otomatis akan mengubah formasi css.


/* tipsy */
.tipsy {
font-size: 11px;
font-weight:bold;
padding: 5px;
position: absolute;
z-index: 100000;
}
.tipsy-inner {
background-color: black;
color: white;
max-width: 200px;
padding: 5px 8px 4px;
text-align: center;
}
.tipsy-inner {
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
}
.tipsy-arrow {
background: url("http://lh4.ggpht.com/_BiYlG6sktcY/TSbFIrXr6LI/AAAAAAAABWI/yKoIykcMtTs/s800/tipsy.gif") no-repeat scroll left top transparent;
height: 5px;
position: absolute;
width: 9px;
}
.tipsy-n .tipsy-arrow {
left: 50%;
margin-left: -4px;
top: 0;
}
.tipsy-nw .tipsy-arrow {
left: 10px;
top: 0;
}
.tipsy-ne .tipsy-arrow {
right: 10px;
top: 0;
}
.tipsy-s .tipsy-arrow {
background-position: left bottom;
bottom: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-sw .tipsy-arrow {
background-position: left bottom;
bottom: 0;
left: 10px;
}
.tipsy-se .tipsy-arrow {
background-position: left bottom;
bottom: 0;
right: 10px;
}
.tipsy-e .tipsy-arrow {
background-position: right top;
height: 9px;
margin-top: -4px;
right: 0;
top: 50%;
width: 5px;
}
.tipsy-w .tipsy-arrow {
height: 9px;
left: 0;
margin-top: -4px;
top: 50%;
width: 5px;
}


Seperti biasa, tempatkan css tersebut di atas ]]></b:skin>

Perubahan pun juga terjadi pada javascript Tipsy


<!-- Tipsy -->
<script type='text/javascript'>
//<![CDATA[
// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// releated under the MIT license

(function($) {

function fixTitle($ele) {
if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
$ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
}
}

function Tipsy(element, options) {
this.$element = $(element);
this.options = options;
this.enabled = true;
fixTitle(this.$element);
}

Tipsy.prototype = {
show: function() {
var title = this.getTitle();
if (title && this.enabled) {
var $tip = this.tip();

$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);

var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
height: this.$element[0].offsetHeight
});

var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
var gravity = (typeof this.options.gravity == 'function')
? this.options.gravity.call(this.$element[0])
: this.options.gravity;

var tp;
switch (gravity.charAt(0)) {
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 's':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'e':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
break;
case 'w':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
break;
}

if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left + pos.width / 2 - 15;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}

$tip.css(tp).addClass('tipsy-' + gravity);

if (this.options.fade) {
$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
}
},

hide: function() {
if (this.options.fade) {
this.tip().stop().fadeOut(function() { $(this).remove(); });
} else {
this.tip().remove();
}
},

getTitle: function() {
var title, $e = this.$element, o = this.options;
fixTitle($e);
var title, o = this.options;
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
} else if (typeof o.title == 'function') {
title = o.title.call($e[0]);
}
title = ('' + title).replace(/(^\s*|\s*$)/, "");
return title || o.fallback;
},

tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
}
return this.$tip;
},

validate: function() {
if (!this.$element[0].parentNode) {
this.hide();
this.$element = null;
this.options = null;
}
},

enable: function() { this.enabled = true; },
disable: function() { this.enabled = false; },
toggleEnabled: function() { this.enabled = !this.enabled; }
};

$.fn.tipsy = function(options) {

if (options === true) {
return this.data('tipsy');
} else if (typeof options == 'string') {
return this.data('tipsy')[options]();
}

options = $.extend({}, $.fn.tipsy.defaults, options);

function get(ele) {
var tipsy = $.data(ele, 'tipsy');
if (!tipsy) {
tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
$.data(ele, 'tipsy', tipsy);
}
return tipsy;
}

function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn == 0) {
tipsy.show();
} else {
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
};

function leave() {
var tipsy = get(this);
tipsy.hoverState = 'out';
if (options.delayOut == 0) {
tipsy.hide();
} else {
setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
}
};

if (!options.live) this.each(function() { get(this); });

if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}

return this;

};

$.fn.tipsy.defaults = {
delayIn: 0,
delayOut: 0,
fade: true,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};

// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};

$.fn.tipsy.autoNS = function() {
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};

$.fn.tipsy.autoWE = function() {
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('.north').tipsy({gravity: 'n'});
$('#north').tipsy({gravity: 'n'});
$('.south').tipsy({gravity: 's'});
$('#south').tipsy({gravity: 's'});
$('.east').tipsy({gravity: 'e'});
$('#east').tipsy({gravity: 'e'});
$('.west').tipsy({gravity: 'w'});
$('#west').tipsy({gravity: 'w'});
$('.tips-fade').tipsy({fade: true});
$('#tips-fade').tipsy({fade: true});
$('.north-west').tipsy({gravity: 'nw'});
$('#north-west').tipsy({gravity: 'nw'});
$('.north-east').tipsy({gravity: 'ne'});
$('#north-east').tipsy({gravity: 'ne'});
$('.south-west').tipsy({gravity: 'sw'});
$('#south-west').tipsy({gravity: 'sw'});
$('.south-east').tipsy({gravity: 'se'});
$('#south-east').tipsy({gravity: 'se'});

});
//]]>
</script>

<!-- end Tipsy -->


Selanjutnya (saya anggap Anda sudah memasang kode jQuery) tempatkan javascript tersebut di bawah kode jQuery dan simpan template Anda.

Untuk memasang Tipsy pada link yang Anda inginkan, silakan gunakan parameter berikut.


<a href="#" class="north-west" title="Contoh north-west gravity">Northwest</a>

<a href="#" class="north" title="Contoh north gravity">North</a>

<a href="#" class="north-east" title="Contoh north-east gravity">Northeast</a>

<a href="#" class="west" title="Contoh west gravity">West</a>

<a href="#" class="east" title="Contoh east gravity">East</a>

<a href="#" class="south-west" title="Contoh south-west gravity">Southwest</a>

<a href="#" class="south" original-title="Contoh south gravity">South</a>

<a href="#" class="south-east" title="Contoh south-east gravity">Southeast</a>


Oke, bila kurang jelas, jangan sungkan untuk bertanya, semoga berhasil, semoga bermanfaat :)


20 komentar:

  1. di profile blog bagian My Web tertulis http://berandabumi.co.cc/ bad link!!!
    sok situ buat demonya postingan saya...xixixixi

    BalasHapus
    Balasan
    1. Ini adalah komentar balasan hehe

      Hapus
    2. mencoba membalas lagi

      Hapus
  2. Oke Kang Ben, terima kasih koreksinya, ya dibuat sendiri atuh demonya, biar makin keren :D

    BalasHapus
  3. Apa kabar kang ardhi, jarang update ya?
    Berarti kalu mau mengedit besarnya tolltips itu dari CSS ya bukan di javascript?

    Tapi saya lihat ada opacity di situ, berarti keburaman bisa di set juga ya.
    offset: 0,
    opacity: 0.8,

    Ada juga delaynya apakah bisa bernilai minus?
    delayIn: 0,
    delayOut: 0,

    Aku mau coba ah, kang..mumpung begadang malam minggu. hehe...canvas pusing kang tuluuuunnnggg..heheh

    BalasHapus
  4. Baik Bang, gimana kabar? rajin banget updatenya hehe... saya memang jarang update blog ini, lagi coba-coba main PPC :D

    Sepertinya begitu, kalau masalah css dan js Bang Hendro pasti lebih jago :D, sip, terima kasih masukkannya

    BalasHapus
  5. boLeh juga nih dicoba, setiap fungsi jadi Lebih terarah pasti. supaya Lebih mudah dipahami.
    nah tuh udah ada Bang Hendro dateng, Lagi minta tuLung-tuLung. hehehehe.....

    BalasHapus
  6. hmmm ada tooltip yg keren kaya facebook atau infolink ga? :D

    BalasHapus
  7. om rame
    Ada om rame, jadi makin rame nih,
    Lebih terarah dan lebih keren om hehe..
    Kenapa tuh Bang Hendro tulung-tulung? hehe..:D

    rio
    Lha ini kan udah kaya facebook sob?
    Klo infolink silakan maen ke Snap Shot

    BalasHapus
  8. hahahaha..., bisa aja nih Mas Ardhi.
    kayaknya tuh Bang Hendro udah puyeng mainan htmL5, wkwkwkwk.....

    BalasHapus
  9. @om rame
    Bener om lagi puyeng, hehe..
    Maunya cepet bisa tapi pelan-pelan dulu.
    @Ardhiansyam
    Waktu kemarin langsung di coba, bener opacity nya bisa di rubah, tapi masih enakan 0.8. Btw easing combinationnya keren banget sob "malam ramah", baru tau lihat di sidebar.
    Top abis..

    BalasHapus
  10. om rame
    Iya, kalau masalah HTML5 pasti dikejar sampai ke manapun hehe..

    blogger admin
    Yang default biasanya lebih enak hehe...
    Sip, makasih. Itu percobaan dari script yang ada di Codrop sob (http://tympanus.net/codrops/)

    BalasHapus
  11. Salam kenal Mas. Info berguna nih mas Ardhiansyah, sepertinya jadi bisa nambah keren blog saya nih.. Tapi, saya kurang paham scrip dan jarang menuliskannya di blog. Sudah terlanjur kebiasaan install plugin. Nah, kalo di Wordpress Tooltips ini bisa dipasang dimana ya? :) BTW, saya suka theme blog ini, keren! Hatur Tangkiyu..

    BalasHapus
  12. Salam kenal juga Kang Dede. Kalau saya malah kurang paham Kang masalah Wordpress hehe..

    Tadi sempat nanya Mbah Google dan nemuin Tipsy buat Wordpress. Silakan dicoba Kang. Terima kasih atas kunjungan dan komentarnya :)

    BalasHapus
  13. Bang, kok ga bisa muncul ya? padahal kodenya udah pas semua

    BalasHapus
  14. Bagus infonya, saya gunakan hal ini untuk gambar saja.

    BalasHapus
  15. susah muncul di IE ! munkin ada sedikit error di halaman blog saya

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑