Tipsy : Tooltips ala Facebook

Siang semua!! hehe.. hari ini saya mau blogging lagi nih, abisnya gak ada kerjaan dirumah, bingung mau ngapain.. hihihii.. udah deh ceritanya kita langsung aja ke pembahasan.  Tooltips adalah 

"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)."

atau secara sederhana yg ditulis oleh blog Ardhiansyam "diatas Bumi kita berpijak"

"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."

Mengapa judul post ini "Tipsy" Tooltips ala Facebook? karena facebook menggunakan Tooltips ini contohnya bisa liat pada gambar di bawah ini :






Tipsy yang saya post ini adalah versi baru. apa bedanya versi baru dengan verse lama?
nah.. kalo versi lama stylenya hanya 1 saja berikut contohnya 
arahkan Mouse anda ke sini
Tetapi yang versi baru ada banyak style, bisa liat di table berikut

NorthwestNorthNortheast
WestEast
SouthwestSouthSoutheast
ok, udah tau kan..!! kita langsung ke tutorialnya

1. Login Blogger 
2. Pilih Rancangan lalu Edit HTML
3. Cari kode </body>, lalu tempatkan script jQuery ini di atas kode </body>
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
4. Taruh kode di bawah ini dibawah kode jQuery diatas
<!-- 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 -->
5. Kalo sudah Simpan Template. eitt .. tapi belum selesai lhoo..!!
6. Untuk memasang Tooltips silahkan 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>


Selamat Mencoba dan Semoga Berhasil 
Jika ada kesalahan atau broken link, bisa koment di bawah!!

15 Responses to "Tipsy : Tooltips ala Facebook"

  1. Ini keren, tapi kadang kadang Jquery mmbuat blog agak lambat,,

    ReplyDelete
  2. gk kok.. asalkan scriptnya di taruh di atas </body>

    ReplyDelete
  3. Terima kasih tipsnya. Canggih

    Salam ukhuwah

    ReplyDelete
  4. bagus sob,, jadi kayak facebook lagi nih ..

    ReplyDelete
  5. Blog saya sudah berat,, jadi saya mau yang standar aja, tapi trik ini memang bagus dan mungkin akan saya terapkan di Blog saaya yg lain..

    ReplyDelete
  6. @Prian : Betul tuh!!keren dah kalo pake ginian
    @catatan : Berat?.. padahal blog kamu sangat2 Ringan!!

    ReplyDelete
  7. Facebook is a hard egg to crack but this article certainly helps. thanks for the info

    ReplyDelete
  8. @volcano : welcome!! :D

    ReplyDelete
  9. pake script jQuery memang kurang optimal untuk kecepatan blog, tapi kalo untuk kepentingan lain ya it's ok seperti tipsy di artikel ini, salam kenal?

    ReplyDelete
  10. @Dhani : ya sih.. script jQuery memang memperlambat blog.. salam kenal juga!! hihihi

    ReplyDelete
  11. bagus nih kang tapi masih :-/ nmr6 gimana nih saya tunggu yah kang,oh iya itu nmr 6 yang dipilih sesukakita yah ga bisa semuanya

    ReplyDelete
  12. @Raindra : semuanya itu satu paket!!
    jadi tinggal di kasih kode jenis tooltipnya masing2 :D kalo mau yang nomor 6 tinggal kasih kode
    class='shout-west'

    ReplyDelete
  13. cara pasangny gmna bozz, yang parameter gmna cara pasangny?

    ReplyDelete
  14. ad yg otomatis gk gan? mohon bales d komentar ane :D

    ReplyDelete