Membuat Tooltip Dengan jQuery #2

 Author : hadinug, 11 February, 2014, Komentar

Jika pada halaman sebelum nya di bagian#1, membuat tooltip dengan jQuery di tampilkan pada bagian atas nya dan tanpa pilihan alternatif posisi tampilnya tooltip, maka pada halaman ini kita akan belajara bagaimana cara menambahkan sebuah alternatif posisi tooltip.

Caranya bagaimana?, caranya yaitu dengan menambahkan attribute tooltip-position. Kita coba dengan 4 pilihan posisi yaitu: top, right, bottom dan left.
Selanjutnya apa yang akan kita lakukan?, yang akan kita lakukan adalah memodifikasi script tooltip pada bagian pertama dan menjadikannya sebagai berikut:

Pada elemen HTML, kita tambahkan attribute tooltip-postion.

#Bottom

<a href="#" tooltip="true" original-title="Hello world!" tooltip-position="bottom">tooltip #bottom</a>


#Top
<a href="#" tooltip="true" original-title="Hello world!" tooltip-position="top">tooltip #top</a>


#Left

<a href="#" tooltip="true" original-title="Hello world!" tooltip-position="left">tooltip #left</a>


#Right

<a href="#" tooltip="true" original-title="Hello world!" tooltip-position="right">tooltip #right</a>

Kemudian lakukan sedikit modifikasi pada file javascript, dengan menambahkan pilihan posisi pada function _view_tip(), seperti hal berikut:

> Javascript
!function($) {
    $(function() {
        $('html').on('hover', '[tooltip="true"]', function(e) {
            x = $(this),
                    _title = (x.attr('original-title')) ? x.attr('original-title') : 'tooltip';
            _position = (x.attr('tooltip-position')) ? x.attr('tooltip-position') : 'top';
            _view_tip(x, _title, _position);
        });
        $('html').on('mouseleave', '[tooltip="true"]', function(e) {
            $('p#tooltip').remove();
        });
    });
}(window.$);

function _view_tip(t, _title, _position) {
    $("html").append("<p id='tooltip'>&nbsp;" + _title + "</p>");
    _tip = $('p#tooltip');
    switch (_position) {
        case 'left':
            _tip.css({
                "left": t.offset().left + ((_tip.innerWidth() / 2)) + t.height()/2 + "px",
                "top": (t.offset().top) - (t.height()) + "px"
            }).append('<span class="arrow-left"></span>').fadeIn("fast");
            $("span.arrow-left").css({
                "top": t.innerHeight() / 4,
                "left": -t.innerHeight() / 2
            });
            break;
        case 'right':
            _tip.css({
                "left": t.offset().left -_tip.innerWidth() - t.height()/2 + "px",
                "top": (t.offset().top) - (t.height()) + "px"
            }).append('<span class="arrow-right"></span>').fadeIn("fast");
            $("span.arrow-left").css({
                "top": t.innerHeight() / 4,
                "left": -t.innerHeight() / 2
            });
            break;
        case 'bottom':
            _tip.css({
                "left": t.offset().left - ((_tip.innerWidth() / 2)) + (t.innerWidth() / 2) + "px",
                "top": (t.offset().top) + (t.height()/2) + "px"
            }).append('<span class="arrow-up"></span>').fadeIn("fast");
            $("span.arrow-up").css({
                "top": -8,
                "left": (_tip.innerWidth() / 2) - 10
            });
            break;
        default:
            _tip.css({
                "left": t.offset().left - ((_tip.innerWidth() / 2)) + (t.innerWidth() / 2) + "px",
                "top": (t.offset().top - _tip.innerHeight()) - (t.height()) + "px"
            }).append('<span class="arrow-bottom"></span>').fadeIn("fast");

            $("span.arrow-bottom").css({
                "bottom": -8,
                "left": (_tip.innerWidth() / 2) - 10
            });
            break;

    }
}

 Dana pada bagian terakhir, tambahan sedikit modifikasi pada file CSS


>CSS

.arrow-bottom{
    border-top: 10px solid #000;
}
.arrow-right{
    border-left: 10px solid #000;
}
.arrow-left{
    border-right: 10px solid #000;
}
.arrow-up{
    border-bottom: 10px solid #000;
}


Demo


Dan hasil akhir anda bisa lihat di link demo  Nah semoga tulisan pada halaman ini bermanfaat, dan cobalah untuk sedikit improvisasi terhadap contoh yang sudah saya berikan pada halaman ini. Semoga bermanfaat :-)


 
Bagikan halaman ke sosial media
 
Tags :   javascript    jQuery    tooltip       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda