Getting Started

Load Jquery and include Tooltip 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-tag" in your html , Tooltip 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-url" in your html.

Don't use drugs.

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

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

Do you wear glasses?

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

You can also set "data-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-place="bottom" data-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.
});