Free Ebook Tutorial from Rosihan Ari's Blog

Ebook Javascript | Ebook PHP | Ebook AJAX | Ebook CSS | Ebook FPDF | Ebook Wordpress | Ebook Java SE




Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery


January 23rd, 2014 | by rosihanari |


Jual kaos

Setelah kemarin membahas tentang penerapan bootstrap di navigasi paging, kini saya akan membahas tentang bagaimana cara membuat tooltips keren dengan sangat mudah menggunakan kombinasi bootstrap dan jQuery. Bootstrap lagi.. bootstrap lagi… iya maklum, soalnya saya lagi demen nih bootstrap karena terus terang saya gak punya jiwa seni dan desain web. Untungnya ada bootstrap sehingga saya tidak perlu pusing pusing bikin style css nya. Cukup gunakan yang sudah ada saja.

Oya, apa itu tooltips? tooltips adalah informasi yang muncul ketika mouse dikenakan pada suatu obyek. Perhatikan contoh tooltips berikut ini

 photo tooltips01_zpsea4cca2e.jpg

OK dah paham ya apa itu tooltips. Selanjutnya dalam artikel ini kita akan memodifikasi tampilan tooltips tersebut supaya lebih cantik menggunakan Bootstrap dan jQuery. Ini dia tampilan yang diharapkan…

 photo tooltips02_zps565e9440.jpg

Bagaimana cara membuatnya? OK pertama misalkan kita memiliki halaman web dengan konten sbb:

contoh.html

<!DOCTYPE html>
<html>
    <head>
       <title>Contoh Tooltips</title>
    </head>
    <body>
        <h1>Search Engines</h1>
        <div>
           <p>Search engine adalah software yang digunakan untuk pencarian informasi di dalam World Wide Web. Beberapa contoh search engine yaitu: <a href="http://www.google.com" title="Google Search Engine">Google</a>, dan Bing.</p>
        </div>
</html>

Jika contoh halaman di atas dibuka di browser, maka tampilan tooltips nya sebagaimana gambar pertama di atas. Nah.. sekarang kita modifikasi file contoh.html di atas.

Sebelum mulai memodifikasi, pertama kita siapkan beberapa file pendukungnya dalam hal ini module bootstrap dan jQuery nya. Untuk module bootsrap bisa diunduh di sini atau lewat situs resmi bootstrap nya. Sedangkan untuk module jQuery nya bisa diunduh di sini.

Ekstrak file ‘bootstrap.zip’ nya, dan hasil ekstrak terdiri dari 3 folder: ‘css’, ‘js’, dan ‘fonts’. Letakkan ketiga folder tersebut ke dalam direktori yang sama dengan file contoh halaman htmlnya. Selanjutnya ekstrak pula file ‘jQuery.zip’ nya dan letakkan ke dalam folder ‘js’ dari bootstrapnya.

Setelah langkah di atas dilakukan, selanjutnya tambahkan kode berikut ini ke bagian <head>..</head>

<!-- meload module css bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- meload module jquery -->
<script src="js/jquery.js"></script>
<!-- meload module javascript bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- mengaktifkan plugin tooltip jQuery -->
<script type="text/javascript">
    $(function () {
        $(".tooltipsku").tooltip();
    });
</script>

Keterangan:
Maksud dari $(".tooltipsku").tooltip(); adalah bahwa obyek yang nanti akan dikenai efek tooltips adalah obyek yang memiliki class ‘tooltipsku’. Anda bisa memberi nama class sendiri nantinya.

Selanjutnya, kita modifikasi juga bagian untuk tooltips nya menjadi seperti ini

<a href="http://www.google.com" class='tooltipsku' data-toggle="tooltip" data-placement="bottom" title="Google Search Engine">Google</a>

Yang perlu diperhatikan adalah, bahwa obyek yang akan dikenakan efek tooltips harus ditambahkan atribut: data-toggle="tooltip". Sedangkan posisi tooltips nya (relatif terhadap obyek) bisa diatur melalui atribut data-placement="...". Beberapa posisi tooltips yang bisa dipilih adalah ‘bottom’, ‘top’, ‘left’, ‘right’.

Dari modifikasi di atas, didapatkan kode utuhnya adalah sbb:

<!DOCTYPE html>
<html>
   <head>
     <title>Contoh Tooltips</title>
     <link href="css/bootstrap.css" rel="stylesheet">
     <script src="js/jquery.js"></script>
     <script src="js/bootstrap.js"></script>
     <script type="text/javascript">
        $(function () {
           $(".tooltipsku").tooltip();
        });
     </script>
   </head>
   <body>
     <h1>Search Engines</h1>
     <div>
       <p>Search engine adalah software yang digunakan untuk pencarian informasi di dalam World Wide Web. Beberapa contoh search engine yaitu: <a href="http://www.google.com" class='tooltipsku' data-toggle="tooltip" data-placement="bottom" title="Google Search Engine">Google</a>, dan Bing.</p>
     </div>
</html>

Efek tooltips di atas juga bisa dikenakan pada obyek berupa button. Contohnya:

<button type="submit" class="btn btn-default tooltipsku" data-toggle="tooltip" data-placement="right" title="Klik di sini untuk memproses">Click Here to Submit</button>

dan hasil penampakannya adalah

 photo tooltips03_zpsa3c4a15b.jpg

OK mudah bukan membuatnya?? selamat mencoba dan semoga bermanfaat.


Kata kunci: bootstrap tutorial - css tutorial - jquery tutorial - tooltips tutorial -


 

Komentar Anda ...