Facebook Twitter Pasang Iklan Anda Disini!
Gratis berlangganan artikel ALDI-XP via E-mail, Join sekarang!!

Tuesday, September 6, 2011

14
TIPSY : CARA MEMBUAT TOOLTIPS SEPERTI FACEBOOK

Do you want to share?

Do you like this story?

Sehabis pulang dari mudik, saya sempatkan untuk membuat tutorial blog tentang "Tipsy Tooltips Seperti Facebook". 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.

(Klik pada gambar agar lebih jelas)

Northwest North Northeast
West East
Southwest South Southeast

1. Cari kode </body> dan letakkan kode dibawah ini sebelum kode </body>
Script :

<!-- 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 -->


2. Cari kode ]]></b:skin>, dan letakkan kode dibawah ini sebelum kode ]]></b:skin>
Script :

.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;}


3. Ini adalah contoh penulisan
Contoh :

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


4. Simpan dan lihat hasilnya. Semoga berhasil
INFO : Jika artikel TIPSY : CARA MEMBUAT TOOLTIPS SEPERTI FACEBOOK ini bermanfaat, silahkan sobat share (copy/paste) artikel ini. Bila berkenan mohon mencantumkan link sumbernya, http://aldi-xpblog.blogspot.com/2011/09/cara-membuat-tipsy-seperti-facebook.html. Terima Kasih,,
Related Post :
Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ALDI-XP di inbox anda:

feedburner

14 komentar: — Skip to Comment

COF said...

Wah menarik infonya sob, ane coba ya, thanks.

EX-DOT said...

wah gonta-ganti kulit aja nie.. :)

Moch Irfan Rizaldi said...

@COF Sama-sama sob, silakan dicoba :i:

Moch Irfan Rizaldi said...

@EX-DOT :h: Hehehe... maklum, kulit yg kemaren gk ada sidebarnya :l:

gue-dedy.blogspot.com said...

ok sob ,,,
makasih atas infonya ;)

ALDI-XP said...

@gue-dedy.blogspot.com Sama-sama sob :j:

The Arts said...

Artikel ini sangat membantu bagi para bloggers lain.

Maju Terus sobat

ALDI-XP said...

@The Arts Terima kasih sob :d:

download software said...

postingannya bagus bagus nih. terima kasih atas informasinya

ALDI-XP said...

@download software Sama-sama sob :l:

SukaKuCoba™ said...

COOLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL by kelik

ALDI-XP said...

@SukaKuCoba™ Terima kasih gan :l:

Rizky Wardiansyah said...

saya simpen dulu ah gan "buat blog saya yang baru" thank ya gan :l:

ALDI-XP said...

@Rizky Wardiansyah Sama-sama sob :a:

Agar Komentar Anda Lebih Hidup Gunakan Emoticon Dibawah Ini

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l:

Post a Comment — Or Back to Content

Ayo berikan sedikit komentar sobat buat blog ini
Sedikit komentar dari sobat sangat berarti untuk blog ini

Cara Berkomentar yang benar :
1. Jangan menggunakan "Anonymous" dalam berkomentar, Admin tidak akan membalas komentar anda
2. Jangan mengirimkan pesan berbentuk Spam
3. Komentar anda akan muncul setelah di konfirmasi oleh admin

 

SITE INFO


BE A SPONSOR

smadav antivirus indonesia