Menggunakan Tooltip pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4 – Pada kesempatan kali ini saya akan memposting tentang cara memasang/menggunakan tooltip pada HTML baik itu di form input, tombol, atau link. Tooltip sendiri adalah seperti pesan atau pemberitahuan yang akan muncul saat user hover atau fokus pada suatu element pada HTML. Ada banyak fitur yang bisa digunakan dalam Bootstrap. Ada juga yang mirip dengan tooltip ini yaitu popover namun lebih kompleks yang sobat bisa lihat pada postingan saya lainnya.

Cara Membuat Tooltip pada HTML

Berikut ini adalah cara menggunakan tooltip, tentunya sebelum itu kita harus memasukkan librari bootstrap terlebih dahulu dengan menambahkan baris ini pada tag <head>. Pada contoh karena untuk keperluan demo jadi saya berikan versi onlinenya namun untuk keperluan development sobat harus mendownload terlebih dahulu librari-librarinya atau sobat bisa mendownloadnya bersama project ini di akhir postingan.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Pada kode diatas terdapat juga plugin fontawesome karena nanti pada contoh saya juga akan memberikan contoh tooltip menggunakan icon/gambar. Untuk menggunakan tooltip bisa pada teks, form input seperti input text, select option, radio button, checkbox, gambar, tombol dan lain-lain. Berikut adalah contoh penggunaan tooltip pada link. Namun sebelum itu sobat perlu menuliskan pada tag <script>…</script> dengan kode dibawah ini

<script>
	$(document).ready(function(){
	  $('[data-toggle="tooltip"]').tooltip();
	});
</script>

$(document).ready(function(){

$('[data-toggle="tooltip"]').tooltip();

});

</script>

Kode diatas merupakan cara menampilkan tooltip dengan hover namun jika ingin menampilkan saat diklik bisa gunakan cara ini

<script>
	$(document).ready(function(){
	  $("#tooltip").click(function(){
	  	$('#tooltip').tooltip("toggle");
	  });
	});
</script>

$(document).ready(function(){

$("#tooltip").click(function(){

$('#tooltip').tooltip("toggle");

});

</script>

Pada kode $(“#tooltip”) merupakan id dari element yang ingin ditampilkan tooltipnya.

1. Tooltip pada link

Untuk menampilkan tooltip bisa di atas, kanan, kiri dan bawah. Contoh pada link adalah sebagai berikut

<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip Atas pada Link">Atas</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Link">Bawah</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip Sebelah Kiri pada Link">Kiri</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip Sebelah Kanan pada Link">Kanan</a>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Link">Bawah</a>

<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip Sebelah Kanan pada Link">Kanan</a>

Hasilnya :

2. Tooltip pada Button

Pada tombol/button juga bisa menampilkannya di sebelah kanan, kiri, atas ataupun bawah. Caranya adalah seperti berikut

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip atas pada Button">
  Tooltip on top
</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip Kanan pada Button">
  Tooltip on right
</button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Button">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip Kiri pada Button">
  Tooltip on left
</button>

Tooltip on top

</button>

Tooltip on right

</button>

Tooltip on bottom

</button>

Tooltip on left

</button>

Hasilnya :

3. Tooltip pada Input Text

Berikut adalah contoh cara penggunaan tooltip pada input text :

<input type="text" name="text" placeholder="Tooltip pada Input Text" data-toggle="tooltip" data-placement="right" title="Tooltip pada Input Text">

1	<input type="text" name="text" placeholder="Tooltip pada Input Text" data-toggle="tooltip" data-placement="right" title="Tooltip pada Input Text">

Hasilnya

4. Tooltip pada Select Option

Berikut adalah contoh cara penggunaan tooltip pada select option :

<select name="text" placeholder="Tooltip pada Input Text" data-toggle="tooltip" data-placement="right" title="Tooltip pada Select Option">
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

Hasilnya :

5. Tooltip pada Radio Button

Berikut adalah contoh cara penggunaan tooltip pada radio button :

<input type="radio" name="radio" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Radio Button"> Radio Button

1	<input type="radio" name="radio" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Radio Button"> Radio Button

Hasilnya :

6. Tooltip pada Checkbox

Berikut adalah contoh cara penggunaan tooltip pada checkbox :

<input type="checkbox" name="checkbox" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Checkbox"> Checkbox

1	<input type="checkbox" name="checkbox" data-toggle="tooltip" data-placement="bottom" title="Tooltip Bawah pada Checkbox"> Checkbox

Hasilnya :

7. Tooltip pada Paragraf

Berikut adalah contoh cara penggunaan tooltip pada paragraf :

<p data-toggle="tooltip" data-placement="left" title="Tooltip">Tooltip pada Paragraf</p>

1	<p data-toggle="tooltip" data-placement="left" title="Tooltip">Tooltip pada Paragraf</p>

Hasilnya :

8. Tooltip isinya dengan HTML

Berikut adalah contoh cara penggunaan tooltip dengan pesan menggunakan kode HTML. Karena dengan kode HTML kita bisa menambahkan Icon/gambar dan tag HTML lainnya :

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<i class='fa fa-car'></i> <em>Dewan</em> <u>Komputer</u> <b>Tooltip dengan HTML</b> <i class='fa fa-car'></i>">
  Tooltip with HTML
</button>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<i class='fa fa-car'></i> <em>Dewan</em> <u>Komputer</u> <b>Tooltip dengan HTML</b> <i class='fa fa-car'></i>">

Tooltip with HTML

</button>

Hasilnya :

Contoh membuat tooltip menggunakan Gambar

<button type="button" class="btn btn-secondary" id="tooltip" data-html="true" title="<i class='fa fa-car'></i> <em>Dewan</em> <u>Komputer</u> <b>Tooltip dengan HTML saat diklik</b> <img src='dk.png' width='80px;'>">
  Tooltip on click
</button>

<button type="button" class="btn btn-secondary" id="tooltip" data-html="true" title="<i class='fa fa-car'></i> <em>Dewan</em> <u>Komputer</u> <b>Tooltip dengan HTML saat diklik</b> <img src='dk.png' width='80px;'>">

Tooltip on click

</button>

Hasilnya :

9. Tooltip dengan event Click

Ini sama saja dengan contoh diatas yang tooltip dengan gambar didalamnya. Berikut cara menampilkan tooltip saat diklik

<button type="button" class="btn btn-secondary" id="tooltip" data-html="true" title="<i class='fa fa-car'></i> <em>Dewan</em> <u>Komputer</u> <b>Tooltip dengan HTML saat diklik</b> <img src='dk.png' width='80px;'>">
  Tooltip on click
</button>

Tooltip on click

</button>

Seperti yang terlihat, sebelumnya saat memunculkan tooltip dengan hover kita menggunakan kode data-toggle=”tooltip” dan saat menggunakan event click maka kita menggunakan id=”tooltip” dengan id bisa sobat isikan apa saja, yang penting nanti pada tag <script> diganti dengan nama idnya yaitu kodenya sebagai berikut

<script>
	$(document).ready(function(){
	  $("#tooltip").click(function(){
	  	$('#tooltip').tooltip("toggle");
	  });
	});
</script>

$(document).ready(function(){

$("#tooltip").click(function(){

$('#tooltip').tooltip("toggle");

});

</script>

Sekian postingan saya tentang cara menampilkan tooltip pada elemen HTML menggunakan Bootstrap. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Popover pada Elemen HTML dan Bootstrap 4

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..