MyTooltip jQuery Plugin

Tabel Konten
  1. Dasar Penggunaan 
    1. Pengaturan Lanjutan 
    2. Contoh Penerapan: Atribut Pengganti 
    3. Contoh Penerapan: Modifikasi Posisi 
    4. Contoh Penerapan: Mengaktifkan Efek Fade Saat Tooltip Ditampilkan 
    5. Contoh Penerapan: Modifikasi Tampilan Spesifik pada Setiap Tooltip 
  2. Integrasi Plugin ke Blogger 

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
});
OpsiKeterangan
"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.
topDigunakan untuk mengatur jarak atas tooltip dari pointer.
leftDigunakan untuk mengatur jarak samping kiri tooltip dari pointer.
fadeJika bernilai true maka tooltip akan ditampilkan dengan efek animasi .fadeIn()
timeDigunakan 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.

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:

    <a href="page-url.html" title="&lt;img src='gambar.jpg' alt='Loading...'/&gt;">Link!</a>

    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:

    $('a').myTooltip("title");

    Kalau seperti di atas, elemen tautan yang tidak memiliki atribut title pun juga akan ikut diseleksi. Berhubung atribut title tidak ditemukan, maka nilainya tidak ditemukan juga (alias: undefined) :W
    Ganti selektornya menjadi seperti ini:

    $('a[title]').myTooltip("title");

    Dengan begitu plugin hanya akan diterapkan pada elemen <a> yang hanya memiliki atribut title =D

  • Beben 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="&lt;img expr:src='data:post.thumbnailUrl' alt='Loading...'/&gt;"
    itu gak bisa, trus saya coba lagi cuman ini :
    title="&lt;img expr:src='data:post.thumbnailUrl' alt='Loading...'/&gt;"

    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:

    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    <a expr:href='data:post.url'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    </a>
    </h2>
    </b:if>
    .post-title {
    position:relative;
    }
    .post-title .post-thumbnail {
    background-color:white;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
    box-shadow:0 1px 3px rgba(0,0,0,0.4);
    padding:5px;
    position:absolute;
    top:100%;
    left:10%;
    z-ndex:99;
    margin-top:20px;
    opacity:0;
    visibility:hidden;
    -webkit-transition:all 0.2s ease-out;
    -moz-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
    }
    .post-title:hover .post-thumbnail {
    visibility:visible;
    margin-top:0;
    opacity:1;
    }

    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,

    http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.imageZoom.js
    jQuery(document.body).imageZoom();
  • Unknown

    kalau untuk satu area aja gimana kang??
    misalnya diterapin di area posting aja tooltipnya, disidebar dan header gak pakai tooltip.

    • Taufik Nurrohman

      $('.post a[title]').myTooltip("title");
      • 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

Komentar telah ditutup.