Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Toolpik · A jQuery Tooltip by Taufik Nurrohman

Hey kid, it seems you have entered the deprecated page. To see the updated version of this page, go to here
jQuery Tooltip

Toolpik is a jQuery tooltip for manipulating the nested tooltip from the browser. Prioritized for <acronym> tag. This is a simple way to change your perspective about the articles. With Toolpik, you can display a beautiful description of the article. Let's take a look:

View Demo Download Deprecated Files

How to Use

Toolpik has a simple way to activate. Simply just install the jQuery and jQuery Easing 1.3, then add the Toolpik scripts below:

<script src='jquery-1.6.2.min.js'></script>
<script src='jquery-easing-1.3.pack.js'></script>
<script>
$(document).ready(function() {
     $('acronym, abbr').hover(function(e) {
          var tip = $(this).attr('title'); //Grab the title attribute's value and assign it to a variable
          var imgh = 'ikon1.png'; //Call the image by variable to reduce load time (not important)
          $(this).attr('title', ''); //Remove the title attribute's to avoid the native tooltip from the browser

          //Change the default cursor to "help" when hovered and append the tooltip element and its value
          $(this).css('cursor', 'help').append('<div id="toolpik"><div id="nurrohman">' + tip + '</div><img alt="Absolute" class="absol" src="' + imgh + '" /><div style="clear: both;" /></div>');

          $('#toolpik').stop(true, true).delay(600).fadeIn(1000, "easeOutQuad"); //Show with fadeIn effect

          //Animate the top and left position follow the mouse pointer position
          $('#toolpik').delay(600).animate({top: e.clientY - 50, left: e.clientX - 170}, {duration:2000, easing:"easeOutBack"}).animate({top:e.clientY - 20}, 400);
     }, function(e) {
          var bringBack = $('#toolpik').html(); //Put back the title attribute's value
          $(this).attr('title',bringBack);
          $('#toolpik').remove(); //Remove the appended toolpik
     });
});
</script>

Activation

Toolpik will find the value of title attribute and convert it to text in Toolpik. Simply wrap the text that you want and add the title attribute with the specified value and it will be a description in Toolpik:

Lorem ipsum <acronym title="I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.

However, if you are not familiar using <acronym> or <abbr> as a marker, you can use another tags such as <a>. To enable <a> as Toolpik, replace the selector $('acronym, abbr') in jQuery to $('a[title]'). You can also insert HTML code into the title attribute to get various content. For safety reasons, just make sure that if you use double quotation symbol on the title attribute, you must use single quotes in tag attributes inside. And for more secure, parse all the code < with &lt; and > with &gt;

Lorem ipsum <acronym title="<h2 class='single-quotes'>I'm a Header</h2>I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.
Lorem ipsum <abbr title="<h2 class='single-quotes'>I'm a Header</h2>I'm a Toolpik">I have a Toolpik</abbr>. Dolor silit pitik.

Or..

Lorem ipsum <acronym title="&lt;h2 class='single-quotes'&gt;I'm a Header&lt;/h2&gt;I'm a Toolpik">I have a Toolpik</acronym>. Dolor silit pitik.
Lorem ipsum <abbr title="&lt;h2 class='single-quotes'&gt;I'm a Header&lt;/h2&gt;I'm a Toolpik">I have a Toolpik</abbr>. Dolor silit pitik.

  

Berlangganan

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

 1 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!