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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumvf95BppBBu1mMG6JOZzfHbk-Inltle4hYtcmXc2Axm-LHO8iPyaW7Ut1fZPMLmf8YEJEra7pza73UKRDc8onc3Dv05mcOazTtnkctnQmJQ_YxakMsuMt0vPy_f5933xp-nZ1kLh510i/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, https://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: