Membuat Tooltip Blog Otomatis Pada Link dan Ringan Loading


Membuat Tooltip Blog Otomatis Pada Link dan Ringan Loading - Tooltip adalah sebuah elemen pada link/gambar yang ber-title yang jika tersentuh cursor akan menampilkan judul/title, disini saya akan berbagi tooltip custom yang selain menjadikan tooltip lebih keren juga fas loading juga, jadi jangan khawatir blog anda menjadi berat. Silakan sorot atau gerakan kursor anda ke link yang ada di blog ini ( Jika masih memakainya ) [ Gerakan Kursor Kesini ] atau juga bisa di lihat pada gambar di bawah ini.

Tooltip Otomatis

Jika kalian ingin memasangnya pada blog anda, Silahkan anda copy CSS dibawah tepat diatas ]]></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);}

Lalu pasang Script ini diatas </head> atau </body> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Jika JQuery di atas sudah ada di template blog anda, silahkan lewati saja langkah diatas. Karena hanya boleh ada satu JQuery pada template.
Lalu simpan Script berikut di atas </head> atau </body>
<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>

Terakhir Simpan. Lalu lihat hasilnya..

Agar cara ini berfungsi, anda harus selalu menerapkan "title" disetiap link/gambar blog anda.

Source: http://tf-m.blogspot.com/2013/11/14.Tooltip-Otomatis-Pada-Link-dan-Ringan-Loading.html

Terima kasih telah berkomentar.

bottom ads 728x90