MyTooltip JQuery Plugin

MyTooltip is a very lightweight JQuery tooltip plugin see? I made ​​this just to give something simple to you who just want to beautify the default tooltip appearance.

MyTooltip adalah plugin JQuery yang luar biasa ringan. Saya membuat ini sekedar untuk memberikan alternatif yang jauh lebih sederhana sebagai pengganti plugin tooltip yang lain kepada Anda yang hanya ingin mempercantik tampilan tooltip standar:

Lihat Demo Unduh Plugin

Dasar Penggunaan

Sertakan JQuery dan plugin tooltip di atas kode </head>. Untuk memodifikasi tampilan tooltip, cukup seleksi elemen yang Anda inginkan kemudian terapkan method .myTooltip() seperti ini:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/mytooltip.js"></script>
<script type="text/javascript">
$(function() {
    $('a').myTooltip();
});
</script>

Pengaturan Lanjutan

Ada sedikit opsi lanjutan yang bisa Anda atur di sini (seperti yang Saya katakan di atas: luar biasa ringan) yaitu meliputi atribut, posisi dan efek:

$('a').myTooltip("title", {
    top: 20,
    left: 20,
    fade: false,
    time: 400
});

Opsi	Keterangan
"title"	Artinya bahwa tooltip akan menampilkan teks yang berasal dari atribut title pada elemen target. Sebagai contoh, jika Anda mengubah "title" menjadi "href", maka tooltip yang tampil berupa URL
top	Digunakan untuk mengatur jarak atas tooltip dari pointer
left	Digunakan untuk mengatur jarak samping kiri tooltip dari pointer
fade	Jika bernilai true maka tooltip akan ditampilkan dengan efek animasi .fadeIn()
time	Digunakan untuk mengatur kecepatan efek .fadeIn()

Contoh Penerapan: Atribut Pengganti

Katakanlah kita tidak ingin menampilkan teks tooltip dari atribut title, maka kita bisa mengubah target atributnya seperti ini:

<img src="your-image.jpg" alt="This is a tooltip!" />

$('img').myTooltip("alt"); // Tooltip akan menampilkan nilai atribut alt dari gambar

Contoh Penerapan: Modifikasi Posisi

Posisi tooltip terhadap pointer bisa dimodifikasi:

$('a').myTooltip("title", {
    top:50,
    left:70
}); // Tooltip akan memiliki jarak atas
    // sebesar 50 piksel dan jarak samping
    // sebesar 70 piksel

Contoh Penerapan: Mengaktifkan Efek Fade Saat Tooltip Ditampilkan

Set opsi fade menjadi true dan tentukan kecepatan animasi pada opsi time jika perlu:

$('a').myTooltip("title", {
    fade:true,
    time:1000
});

Contoh Penerapan: Modifikasi Tampilan Spesifik pada Setiap Tooltip

Untuk menciptakan tampilan spesifik tentunya kita membutuhkan kelas yang spesifik juga. Di sini Saya memberikan fasilitas untuk menyisipkan kelas spesifik pada tooltip yang diinginkan dengan cara menambahkan atribut data-custom pada elemen target dengan nilai yang nantinya akan menjadi kelas baru pada tooltip:

<a href="#" data-custom="yourClass" title="This is a custom tooltip!">Example Link</a>

Kemudian atur tampilannya sesuka hati dengan cara menambahkan kode CSS khusus untuk kelas yang sudah Anda tentukan dalam atribut data-custom:

.yourClass {
  background-color:red;
  color:yellow;
  /* Dan sebagainya... */
}

Integrasi Plugin ke Blogger

Masuk ke halaman editor HTML Template Anda:

Mengedit HTML

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya:

.tooltip {
  background-color:black;
  color:white;
  padding:5px 10px;
  display:block;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
}

Setelah itu temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/mytooltip/mytooltip.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a').myTooltip();
});
//]]>
</script>

Jika kode yang Saya beri garis bawah sudah ada di dalam template maka Anda tidak perlu menambahkannya lagi. Hapus script tersebut!

Klik Simpan Template.