MyTooltip jQuery Plugin
Tabel Konten
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:
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 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 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="img/my-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:
// Tooltip akan memiliki 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
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:
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,.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 kode ini:
</head>
Salin kode 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 kode yang Saya beri garis bawah sudah ada di dalam templat, maka Anda tidak perlu menambahkannya lagi. Hapus skrip tersebut!
Klik Simpan Template.
27 Komentar
MUX SPARROW
Hadewh.. gak pernah kapok main ke sini... pasti dapet pemandangan endahh dari kode disulap jadi tampilan.. <3 btw, Mas.. tooltipnya bisa diisi link, gambar, etc. seperti yang toolpik gak?! :Q
Taufik Nurrohman
@MUXLIMO Bisa, asalkan kode HTML
<img>
di dalam atribut tooltip sudah di-escape supaya bisa valid dan tidak bikin error. Misalnya begini:Caranya rata-rata sama, dengan memasukkan tag HTML palsu ke dalam atribut HTML :) ⇒ DEMO
Putra
kalau pengen rubah offsetnya di data-custom tertentu gmn pak? :/
Putra
ohh iya. Itu kalau di sebuah link tp gak ada attribut title nya kok malah ada tooltipnya yah? trus isinya malah undefind? :p
Beben Koben
keren euy, dan sedikit scriptnya :-bd
Taufik Nurrohman
@Alam Perwira Itu karena selektornya kurang spesifik. Mungkin kamu menuliskannya seperti ini:
Kalau seperti di atas, elemen tautan yang tidak memiliki atribut
title
pun juga akan ikut diseleksi. Berhubung atributtitle
tidak ditemukan, maka nilainya tidak ditemukan juga (alias:undefined
) :WGanti selektornya menjadi seperti ini:
Dengan begitu plugin hanya akan diterapkan pada elemen
<a>
yang hanya memiliki atributtitle
=DBeben Koben
@Alam Perwira karena pemanggilan a, jadi semua yg a a ada tooltipnya :P
$('a').
Mau nggak mau harus ada pemakaian class/id dalam pemakaian, agar a tidak terpanggil semua :)
Beben Koben
@Taufik Nurrohman maksud saya gitu juga :D
Unknown
hihihi jd inget tooltip standar dari tooltip yg saya pake :D
MUX SPARROW
@Taufik Nurrohman
Dahsyat Mas! barusan saya praktekin di postingan terbaru.. makjleb! \o/
MUX SPARROW
@Taufik Nurrohman
tapi kasus di blog ane mah, diganti selektornya ke bentuk khusus tadi.. malah gak muncul gambarnya.. cuman tulisan link doang.. :p makanya dibalikin lagi aja ke awal.. :( gapapa deh.. segitu juga udah uyuhan buat sayah mah... :Q
Putra
@Taufik Nurrohman nah, berhasil deh. Thankyu pak Tufik =D
terus yang "rubah offsetnya di data-custom tertentu gmn pak?" :\
eka
Keren Berhasil xD trimakasih tutorialnya
Putra
yah saya coba di blog http://demosite-u404.blogspot.com/ ,CSS nya nggak jalan sedikitpunn, penyebabnya knp yah? sering jug di template blog itu kayak gtu :'(
Putra
nyoba experimen dari jawaban komentar paling atas. Jadinya pas dihover muncul gambar (thumbnailnya)
di judul post atau H2 saya coba sisipin code nih :
expr:title="<img expr:src='data:post.thumbnailUrl' alt='Loading...'/>"
itu gak bisa, trus saya coba lagi cuman ini :
title="<img expr:src='data:post.thumbnailUrl' alt='Loading...'/>"
Sama, juga gak bisa :\ kesalahan / kekurangan ya dimana yah?
Beben Koben
kemana master Taufik yah?
sepertinya lg sibuk nyebarin kreatifitasnya ke sana ke sono deh!
di codepen ada nih si master :D
Unknown
@Beben Koben Lagi Bulan madu mungkin nich pemlik blog, Pedahal pengemar-pengemar lagi pada kangen...
Putra
@Beben Koben hu'uh. Lama banget gak ada kabar ~x(
Taufik Nurrohman
@Alam Perwira Nggak perlu pakai plugin Al. Pakai cara manual saja:
Sampel: http://jsfiddle.net/tovic/kw7LD/10/
g
gan ane ada masalah dengan Jquery nya. Jadi gini, salah satu script ane gak bisa pake jquery 1.72, sedangkan tooltip ini harus memakai jquery 1.7.2, gimana nih solusinya,
Taufik Nurrohman
Update plugin ImageZoom ke versi terbaru. Biasanya ada. Cari di GitHub. Contohnya ini, Saya dapat versi pembaharuan 29 Maret 2012 ⇒ https://github.com/vieron/jquery.imageZoom/blob/master/jquery.imageZoom.js
Taufik Nurrohman
Eh, mungkin bukan pembaharuan tanggal 29 Maret 2012, cuma salinan plugin di tanggal 29 Maret 2012. Dicoba-coba saja :p
Unknown
kalau untuk satu area aja gimana kang??
misalnya diterapin di area posting aja tooltipnya, disidebar dan header gak pakai tooltip.
Taufik Nurrohman
V
kang taufik,, Plugin MyTooltip nya upload lagi dong. :)
Anonim
benar2 sangat keren mas taufik, karena pertanyaan saya sudah ditanyakan oleh sahabat lain, maka saya tinggal terapkan saja. terima kasih ilmunya mas. salam kenal mas, jika berkenan dan hoby berita misteri, mungkin mas taufik akan senang dengan blog saya |o|
Admin
mas taufik, minta solusinya, setelah saya terapkan tooltip diatas, sekrg saya ada sedikit kendala, pada postingan (popular post) saya menggunakan sidebar sticky untuk menscoll populer post, tapi setelah sticky berkerja, malah tooptip link tersembunyi ke belakang populer post, bisa gak tooltip ini dikedepankan agar tampilan lebih cantik? atau mas taufik kunjungi ke alamat blog saya biar lebih paham atas maksud saya (di postingan, bukan halaman home).
mohon di jawab ya mas taufik. kalau gak bisa juga mohon dijawab ya agar saya tidak penasaran.
dan selamat hari idul adha, mohon maaf lahir & bathin :)
semoga keluarga mas taufik dengan keadaan sehat selalu, dan salam juga buat sahabat blogger yang lain AMIN... :) :-bd