Membuat Tooltip Dengan jQuery #1

 Author : hadinug, 10 February, 2014, Komentar

Salah satu dari sekian banyak bahasa yang berjalan di sisi client yang paling banyak digunakan sampai saat ini adalah javascript. Hampir semua website yang online saat ini menggunakan javascript sebagai bahasa action script.


JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang kemudian namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.



Berikut contoh sederhana penulisan javascript:


<script type="text/javascript">
        alert("yeah, hello world!");
</script>

Salah satu tonggak bersejarahnya javascript adalah saat di temukan nya ajax pada tahun 90'an dan kemudian diikuti oleh jQuery pada tahun 2000. Hingga saat ini javascript terus berkembang sangat pesat dari prediksi sebelum nya.

Dan penggunaan javascript saat ini tidak lagi haya untuk kebutuhan client, tapi juga sudah merambah ke sisi server (nodejs).


Lalu apa saja yang bisa lakukan dengan javascript?. Jawaban nya banyak, bahkan sekelas google dan microsoft mengatakan "Javascript is future". Namun pada halaman ini kita tidak akan membahas semua hal yang bisa dilakukan oleh javascript. Kita hanya akan membahas salah satunya saja, yaitu membuat tooltip dengan javascript.


Mari kita mulai dengan tahap pertama, dengan sebuah masalah. Saya membiasakan diri membuat sebuah program dengan suatu masalah sederhana. Dan pada kasus ini, saya ingin membuat sebuah tooltip dimana, ketika element html tooltip diarahkan oleh ke kursor maka tooltip akan tampil. Dan saya ingin tanpa pendeklarasin script setiap kali penggunaan nya seperti jQuey plugin, cukup dengan menambahkan attribute pada elemen html yang ingin dimunculkan sebagai tooltip.


Hal ini bisa kita lakukan, dengan menggunakan javascript jQuery. Hal pertama yang akan kita lakukan adalah dengan menambahankan attribute tooltip="true" kemudian kita tambahkan original-title="Hi, i'm tooltip!" pada sebuah elemen HTML.


> HTML

<a href="#" tooltip="true" original-title="Hi, i'm tooltip!">tooltip</a>

Kemudian pada script js nya, logika pertama adalah, kita akan membaca elemen HTML yang berisi attribute tooltip="true". Setelah ditemukan, kita manipulasi elemen tersebut dengan memunculkan sebuah tooltip.


> Javascript

!function($) {
    $(function() { 
        $('html').on('hover', '[tooltip="true"]', function(e) {
            x = $(this),
            _title = (x.attr('original-title')) ? x.attr('original-title') : 'tooltip'; // define & get text of tooltip
            _view_tip(x, _title); // call function for view 
        });
        $('html').on('mouseleave', '[tooltip="true"]', function(e) {
            $('p#tooltip').remove();
        });
    });
}(window.$);

function _view_tip(t, _title) {
    $("html").append("<p id='tooltip'>&nbsp;" + _title + "</p>");
    _tip = $('p#tooltip');
   // aet position on center top
    _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
    });
}

Kemudian pada css nya kita tambahkan kode seperti dibawah ini. Kode berikut digunakan untuk mempercantik tampilan tooltip, seperti membuat bentuk segitiga dengan css, dan memberi warna.


> CSS

html{
    position: relative;
}
p#tooltip{
    padding: 5px;
    background: #000;
    color: #fff; 
    z-index: 100;
    display: none;
    position: absolute
}
.arrow-up,.arrow-bottom {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    z-index: 300;
}
.arrow-left, .arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    z-index: 300;
}
.arrow-bottom{
    border-top: 10px solid #000;
}


Demo


Dan hasilnya anda akan lihat seperti halaman demo berikut. Nah pada step #1 ini, saya hanya menampilkan posisi tooltip di posisi atas - tengah terhadap elemen tooltip. Ditutorial selanjutkan kita akan membuat tooltip yang lebih kompleks dari tahap awal 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