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 ialah plugin jQuery yang luar biasa ringan. Saya membuat ini sekedar untuk memperlihatkan alternatif yang jauh lebih sederhana sebagai pengganti plugin tooltip yang lain kepada Anda yang hanya ingin mempercantik tampilan tooltip standar:
Dasar Penggunaan
Sertakan jQuery dan plugin tooltip di atas isyarat </head>. Untuk memodifikasi tampilan tooltip, cukup seleksi elemen yang Anda inginkan lalu terapkan method .myTooltip() ibarat ini:
<script src="js/jquery.js"></script> <script src="js/mytooltip.js"></script> <script> $(document).ready(function() { $('a').myTooltip(); }); </script>Pengaturan Lanjutan
Hanya ada sedikit opsi lanjutan yang dapat Anda atur di sini (seperti yang Saya katakan di atas: luar biasa ringan) yaitu mencakup 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, jikalau 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 imbas animasi .fadeIn() |
| time | Digunakan untuk mengatur kecepatan imbas .fadeIn() |
Contoh Penerapan: Atribut Pengganti
Katakanlah kita tidak ingin menampilkan teks tooltip dari atribut title, maka kita dapat mengubah sasaran atributnya ibarat ini:
<img src="img/my-image.jpg" alt=" is a very lightweight jQuery tooltip plugin MyTooltip jQuery Plugin">$('img').myTooltip("alt"); // Tooltip akan menampilkan nilai atribut `alt` dari gambarContoh Penerapan: Modifikasi Posisi
Posisi tooltip terhadap pointer dapat dimodifikasi:
// Tooltip akan mempunyai jarak atas // sebesar 50 piksel dan jarak samping // sebesar 70 piksel $('a').myTooltip("title", { top: 50, left: 70 });Contoh Penerapan: Mengaktifkan Efek Fade Saat Tooltip Ditampilkan
Set opsi fade menjadi true dan tentukan kecepatan animasi pada opsi time jikalau perlu:
$('a').myTooltip("title", { fade: true, time: 1000 });Contoh Penerapan: Modifikasi Tampilan Spesifik pada Setiap Tooltip
Untuk membuat tampilan spesifik tentunya kita membutuhkan kelas yang spesifik juga. Di sini Saya memperlihatkan akomodasi untuk menyisipkan kelas spesifik pada tooltip yang diinginkan dengan cara menambahkan atribut data-custom pada elemen sasaran dengan nilai yang nantinya akan menjadi kelas gres pada tooltip:
<a href="#" data-custom="yourClass" title="MyTooltip jQuery Plugin">Example Link</a>Kemudian atur tampilannya sesuka hati dengan cara menambahkan isyarat 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:
Temukan isyarat ini:
]]></b:skin>
Salin isyarat 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,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4); }Setelah itu temukan isyarat ini:
</head>
Salin isyarat ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script src='http://dte-project.googlecode.com/svn/trunk/myTooltip/mytooltip.min.js'></script> <script> //<![CDATA[ $(document).ready(function() { $('a').myTooltip(); }); //]]> </script>Jika isyarat yang Saya beri garis bawah sudah ada di dalam templat, maka Anda tidak perlu menambahkannya lagi. Hapus skrip tersebut!
Klik Simpan Template.
Sumber https://www.dte.web.id/