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(); });


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="">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. });