Boring with Tooltip, Try ToolGIF

Mungkin kita sudah tidak asing lagi dengan istilah tooltip! Tapi apakah kalian sudah kenal dengan Toolgif? Sebuah jQuery plugin sederhana yang akan menampilkan gambar berformat GIF dalam format tooltip (judul atau title kala menyorot sesuatu yang di beri tag) :D Seperti yang kita ketahui, gambar dengan format GIF ini lumayan memakan waktu loading. Ada bijaknya di akali dengan trick ini. Sobat tidak perlu khawatir mencari-cari gambar gif-nya, soalnya toolgif ini layanan kreasi dari web giphy.com Giphy site bisa sobat pakai mau buat karya macam apapun, lihat coba halaman labsnya giphy.com/labs

Untuk bisa menggunakan layanan jasa tool-GIF, pada blog sobat sudah harus tertanam script jQuery.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="toolgif.js"></script>

Cara pemakaiannya cukup mudah. Sobat tinggal sisipkan variabel <span class="toolgif">BLAH</span> Berikut beberapa syntax HTML yg bisa kalian pakai.

Default<p>I am a <span class="toolgif">test</span>.</p>Add your own gif by adding "data-url" in your html<p>Don't use <span class="toolgif" data-url="http://66.media.tumblr.com/0b05c6d462cfd59a25722c7843a12207/tumblr_ob8ivb32NO1v9gbpno1_400.gif">drugs</span>.</p><p>Do you wear <span class="toolgif" data-tag="deal with it">glasses</span>?</p>Set "data-place" value top or bottom. Default is top.<p>You see i am below the <span class="toolgif" data-place="bottom" data-tag="coding">text</span>.</p>Langkah terakhir panggil ke semua itu dengan Activate Toolgif

$(function() { 
$(".toolgif").toolgif(); 
});

You can customize them.

$(".toolgif").toolgif({
    width: 200,
    height: 100,
    speed: 200,
    borderRadius: 5,
    textColor: "initial",
    gifChange: true //If you make it false , one random gif limited by your tag will be found on Giphy.Gif won't change when you hover over your text again unless page reload is made.
});

Resource & demo by:
mburakerman.github.io/toolgif - github.com/mburakerman/toolgif - codepen.io/mburakerman/full/dXwgwN

Bonus:
Material floating button CSS - Fancy menu - Dropdown CSS animation examples - Action Button. Only CSS - yJRNoL - Search text highlight - Ripple Modal Effect