Bootstrap Tooltip Plugin

Fungsi dari tooltip

Tooltips berguna ketika Anda perlu untuk menjelaskan link. Plugin ini terinspirasi oleh jQuery.tipsy Plugin ditulis oleh Jason Frame. Tooltips telah sejak diperbarui untuk bekerja tanpa gambar, menghidupkan dengan animasi CSS, dan data-attributes untuk penyimpanan gelar lokal.

Jika Anda ingin menyertakan fungsi plugin ini secara individual, maka Anda akan perlu tooltip.js. Lain, seperti yang disebutkan dalam bab Ikhtisar Bootstrap Plugins, Anda dapat mencakup bootstrap.js atau bootstrap.min.js diminimalkan.

Cara membuat Bootstrap Tooltip Plugin

Tooltip Plugin menghasilkan konten dan markup pada permintaan, dan secara default tempat tooltips setelah elemen pemicu mereka. Anda dapat menambahkan tooltips berikut ini dua arah:

• Dengan data attributes : Untuk membuat tooltip, tambahkan data-toogle=”tooltip” untuk tag anchor . Contoh : <a href="#" data-toggle="tooltip" title="Example tooltip"> Hover over me</a>.
• Dengan Javascript : Menampilkan tooltip dengan javascrip, adalah sebagai berikut : $('#identifier').tooltip(options).

Plugin Tooltip tidak hanya css, seperti dropdown atau plugin lain yang dibahas di tutorial sebelumnya. Untuk menggunakan plugin ini Anda harus mengaktifkannya menggunakan jquery (baca javascript). Untuk mengaktifkan semua tooltips pada halaman Anda hanya menggunakan script ini:

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

Contoh Tooltip

Berikut ini contoh bootstrap tooltip plugin

<h4>Tooltip examples for anchors</h4>

This is a <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip on left"> Default Tooltip </a>.

This is a <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on Left </a>.

This is a <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on Top </a>.

This is a <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on Bottom </a>.

This is a <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on Right </a>

<br>

<h4> Tooltip examples for buttons </h4>

<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on left"> Default Tooltip </button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">

Tooltip on bottom

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button>

<script>

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

</script>