Boring with Tooltip, Try ToolGIF - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Boring with Tooltip, Try ToolGIF, we have prepared well for this article you read and download the information therein. hopefully fill posts Article jQuery, Article Resource, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Boring with Tooltip, Try ToolGIF
link : Boring with Tooltip, Try ToolGIF

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

Thus articles Boring with Tooltip, Try ToolGIF

that is all articles Boring with Tooltip, Try ToolGIF This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Boring with Tooltip, Try ToolGIF with the link address https://autopostingblogspot.blogspot.com/2016/08/boring-with-tooltip-try-toolgif.html