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,  // fadeIn and fadeOut speed
  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.
});