Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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 jQuery Plugin

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 Unduh Plugin (Minified)

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:

Mengedit HTML Template
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,.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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 27 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!