Bootstrap tooltip Plugin (part II)

Bootstrap tooltip Plugin part II

Pada tutorial kali ini kita melanjutkan pembuatan Bootstrap tooltip Plugin, yang dimana kita akan membuat bootstrap tooltip menggunakan API Bootstrap atau Javascrip, simak langkah-langkahnya.

Pilihan Tooltip

Ada pilihan tertentu yang dapat ditambahkan melalui API Bootstrap data atau dipanggil melalui JavaScript. Tabel berikut mencantumkan pilihan:

Pilihan Nama	Type / default value	Nama data-attribute	keterangan
Animation	boolean Default: true	Data- animation	Menerapkan transisi CSS memudar ke tooltip.
HTML	boolean Default: true	data-html	Menyisipkan HTML ke tooltip. Jika palsu, metode teks jQuery akan digunakan untuk memasukkan konten ke dalam dom. Gunakan teks jika Anda khawatir tentang serangan XSS.
placement	string|function Default: top	data-placement	Menentukan bagaimana posisi tooltip (Yaitu, atas | bawah | kiri | kanan | auto). Ketika auto ditentukan, itu, akan dinamis reorientasi tooltip. Misalnya, jika penempatan adalah "auto kiri", tooltip akan menampilkan ke kiri bila memungkinkan, mereka bijaksana itu akan menampilkan kanan.
selector	String Default: false	Data-selector	Jika pemilih disediakan, tooltip benda akan dilimpahkan ke target yang ditentukan.
title	String | function Default: "	data-title	Pilihan judul judul standar nilai jika atribut judul tidak menyajikan.
trigger	String Default: 'hover focus'	data-trigger	Mendefinisikan bagaimana itu tooltip aku dipicu: klik | arahkan | fokus | manual. Anda dapat melewati beberapa memicu; memisahkan mereka dengan ruang.
content	String | function Default: ''	data-content	Kegagalan kadar nilai jika data-atribut konten tidak hadir.
delay	Number | object Default: 0	data-delay	Penundaan menunjukkan dan menyembunyikan tooltip di ms - tidak berlaku untuk pengguna pemicu jenis. Jika nomor disediakan, delay diterapkan untuk kedua Sembunyikan tampilan. struktur objek adalah: delay: {show: 500, hide: 100}
container	string | false Default: false	data-container	Menambahkan tooltip untuk tertentu elemen. Contoh: kontainer: 'body'

 

Methods Bootstrap Tooltip

Berikut ini adalah beberapa metode yang berguna untuk tooltips Bootstrap:

Method	Keterangan	Contoh
Options:.tooltip(options)	Menempel tooltip handler ke koleksi elemen.	$().tooltip(options)
Toggle:.tooltip('toggle')	matikan sebuah tooltip elemen.	$('#element').tooltip('toggle')
Show:.tooltip('show')	Menampilkan tooltip elemen.	$('#element').tooltip('show')
Hide:.tooltip('hide')	Menyembunyikan tooltip elemen.	$('#element').tooltip('hide')
Destroy:.tooltip('destroy')	Menyembunyikan dan menghancurkan tooltip elemen.	$('#element').tooltip('destroy')

 

Contoh tooltip bootstrap dengan data atribute :

<div style="padding: 100px 100px 10px;">

This is a <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip on method show

</a>.

This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip on method hide

</a>.

This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip on method destroy

</a>.

This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip on method toggle

</a>.

<br><br><br><br><br><br>

<p class="tooltip-options" >

This is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2

</h2>">Tooltip on method options

</a>.

</p>

<script>

$(function () { $('.tooltip-show').tooltip('show');});

$(function () { $('.tooltip-hide').tooltip('hide');});

$(function () { $('.tooltip-destroy').tooltip('destroy');});

$(function () { $('.tooltip-toggle').tooltip('toggle');});

$(function () { $(".tooltip-options a").tooltip({html : true });

});

</script>

<div>