Membuat Tooltip

Selamat malam.
Kali ini, saya akan memposting tentang tooltips..
Apa itu tooltip? Tooltip adalah sebuah penjelasan tentang objek yang ditunjuk oleh kursor.
Biasanya untuk menerangkan objek tersebut.

Langsung saja ya... daripada bertele-tele :D

1. Masuk ke dasbor, klik drop down blog anda, kemudian klik template.
2. Pilih Edit HTML. Jangan lupa backup template blog anda.
3. Cari Kode

]]></b:skin>

4. Letakkan kode

.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/AVvXsEj-bOVDgpwX2hBDg46PXOrH8mro-2cg5psyiFq3kona3fi_Qcj7RupQxpXpvLaMBBq_DhnQxfrWGAMKVaXT1_OKcF-MTroTo_qygIruA_x-2SGUVsRoVMc9Jktlhyf212FGprV4ApfpWqO3/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;}

di atas kode no.2.
5.letakkan kode

    <!-- Tipsy -->
    <script type='text/javascript'>
    //<![CDATA[
    // not coded by refardo-blogger.blogspot.com
    // don't change the code if you want the code's work


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

ke atas kode

</body>

6. Simpan
7. Jika ingin kodenya bekerja, anda harus membuat link yang akan diberi tooltip seperti ini.

Ini untuk membuat link ke Utara : <a class='south' href='Link Yang Akan Dituju' title='Title Link'>Nama Link </a>
Ini untuk membuat link ke Timur : <a class='east' href='Link Yang Akan Dituju' title='Title Link'>Nama Link </a>
Ini untuk membuat link ke Barat : <a class='west' href='Link Yang Akan Dituju' title='Title Link'>Nama Link </a>
Ini untuk membuat link ke Selatan : <a class='north' href='Link Yang Akan Dituju' title='Title Link'>Nama Link </a>