Tooltip Otomatis Pada Link dan Ringan Loading

Tooltip

Bagi sebagian blogger mendengar tooltip rasanya bukan hal yang luar biasa lagi. Tooltip adalah sebuah elemen apabila cursor disentuh pada bagian link atau gambar maka akan terlihat ada ringkasan link atau dengan bahasa baku adalah title. Sebagai Contoh silahkan Cursor disentuh pada gambar atau Link diatas ini.

Pasang CSS ini di ]]></b:skin> atau </style>

.tooltip {
background-color:#000;border-radius:3px;
color:white;font: 14px Oswald;
padding:10px 10px;display:block;box-shadow:0 1px 2px rgba(0,0,0,0.4);}

Pasang Script ini di atas kode </head> atau </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
    $.fn.myTooltip = function(n,o) {
        n = n || "title";
        o = jQuery.extend({
            top: 30,
            left: 30,
            fade: true,
            time: 400
        }, o);

        return this.each(function() {
            var ww = $(window).width(),
                wh = $(window).height();
            $(window).resize(function() {
                ww = $(this).width(),
                wh = $(this).height();
            });
            $(this).on({
                mouseenter:function(e) {
                    var t = $(this).attr(n),
                        tp = e.pageY,
                        lp = e.pageX;
                    $('body').append('<span class="tooltip" style="position:absolute;z-index:999;display:none;">'+t+'</span>');
                    if(o.fade) {
                        $('.tooltip').fadeIn(o.time);
                    } else {
                        $('.tooltip').css('display', 'block');
                    }
                    if($(this).attr('data-custom')) {
                        $('.tooltip').addClass($(this).data('custom'));
                    }
                    var ew = $('.tooltip').outerWidth()+30;
                    $(this).removeAttr(n).mousemove(function(e) {
                        var tp = e.pageY,
                            lp = e.pageX;
                        if(lp+ew > ww) {
                            lp = ww-ew-o.left;
                        }
                        $('.tooltip').offset({top:tp+o.top,left:lp+o.left});
                    });
                },
                mouseleave:function() {
                    $(this).attr(n, $('.tooltip').html());
                    $('.tooltip').remove();
                }
            });
        });

    };
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a[title]').myTooltip("title");
});
//]]>
</script>

Perhatikan Jquery yang berwarna biru itu, jika blog anda sudah ada pasang Jquery ini dengan versi apapun silahkan abaikan Jquery ini.

Cara Aktifkan Tooltip Pada gambar dan Link dipostingan:

01. Biasanya gambar akan telihat seperti ini setelah Upload.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDab_DzE4I4H4_fPUAqKYpqe_OdXDQ-8Suvkw4kDWzI2PfxF3ZfyvDu9g7TTD7lni5-9WUkj9dmPxdpxAm-t29a5r8WwEMpIGVnllFObVwBR7XzmW1krwajzwIqnIjj6MQoQ_SD5CqxPc/s1600/Tooltip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDab_DzE4I4H4_fPUAqKYpqe_OdXDQ-8Suvkw4kDWzI2PfxF3ZfyvDu9g7TTD7lni5-9WUkj9dmPxdpxAm-t29a5r8WwEMpIGVnllFObVwBR7XzmW1krwajzwIqnIjj6MQoQ_SD5CqxPc/s1600/Tooltip.jpg" /></a></div>

Dan jika mau aktifkan tooltip akan telihat seperti dibawah ini (Kita tinggal tambahkan title pada gambar saja seperti contoh dibawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjOnI4QzCAapRwFiGEFrP1-d76Kw9fKkFIXRVzxZkRk1OKJryJNPWe1BY_pFGG-u3Coy_0IAV5iTc4gSkAluctueAObtAjlQUWd4-VVQc6uFfCJTJVigSkul9UnvgqQj41XPYqfWe4_uk/s1600/Tooltip.jpg" target="_blank" title="Tooltip Otomatis Paling Link dan Ringan Loading"><img alt="Tooltip Otomatis Paling Link dan Ringan Loading" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjOnI4QzCAapRwFiGEFrP1-d76Kw9fKkFIXRVzxZkRk1OKJryJNPWe1BY_pFGG-u3Coy_0IAV5iTc4gSkAluctueAObtAjlQUWd4-VVQc6uFfCJTJVigSkul9UnvgqQj41XPYqfWe4_uk/s1600/Tooltip.jpg" /></a></div>

02. Aktifkan link dan jika kita klik HTML akan terlihat seperti ini

<a href="http://tf-m.blogspot.com/" target="_blank">Tooptip</a>

Untuk Aktifkan tooltip kita tinggal tambahkan title pada link seperti contoh dibawah ini.

<a href="http://tf-m.blogspot.com/" target="_blank" title="tooltip">Tooptip</a>