Cara Membuat 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

Northwest	North	Northeast
West		East
Southwest	South	Southeast

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

Sumber :

Posted in: Blog