Getting Started

Load jQuery and include Toolgif file


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

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

Set up your Html

If you don't set "data-toolgif-tag" in your html, Toolgif takes your text as tag and find gifs on Giphy.


<p>I am a <span class="toolgif">test</span>.</p>

Activate Toolgif


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

Examples

Hover over cat more than one time.You see gifs are changing.

Lorem ipsum dolor sit cat.


<p>Lorem ipsum dolor sit <span class="toolgif">cat</span>.</p>

You can add your own gif by adding "data-toolgif-url" in your html.

Don't use drugs.


<p>Don't use <span class="toolgif" data-toolgif-url="http://66.media.tumblr.com/0b05c6d462cfd59a25722c7843a12207/tumblr_ob8ivb32NO1v9gbpno1_400.gif">drugs</span>.</p>

You can add your own tag by adding "data-toolgif-tag" in your html.

Do you wear glasses?


<p>Do you wear <span class="toolgif" data-toolgif-tag="deal with it">glasses</span>?</p>

You can also set "data-toolgif-place" value top or bottom. Default is top.

You see i am below the text.


<p>You see i am below the <span class="toolgif" data-toolgif-place="bottom" data-toolgig-tag="coding">text</span>.</p>

Default Settings

These are default settings.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. });