About Me

Hai, saya Rosihan Ari Yuana. Saya sehari-hari adalah mengajar di Universitas Sebelas Maret.

Bidang riset saya tentang adaptive learning, computer aided learning, dan datascience

Selain itu, saya juga seorang penulis buku dan blogger.

More about me...

  • Home
  • /
  • CSS
  • /
  • Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery

Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery

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.

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.

 

Saya seorang dosen dan peneliti di Universitas Sebelas Maret. Bidang penelitian saya tentang: adaptive learning, datascience, dan computer aided learning. Selain itu saya juga seorang blogger, serta penulis buku tentang pemrograman, dan matematika.

Leave a Reply