TOOLGIF

The only GIF tooltip plugin you need

🌟 Easy to use 🌟

🌈 Only 4kb 💓 Star

Default

By default, Toolgif takes your text as tag and find gifs on Giphy.

Lorem ipsum dolor cat amet.

<p>Lorem ipsum dolor <span class="my-class">cat</span> amet.<p>
new Toolgif(".my-class").toolgif();
Codepen Demo external-link

Custom Gifs

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

Don't use drugs.

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

Custom Tags

You can easily set specific tag.

Do you wear glasses?

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

Default Options

These are default options. You can easily play with them.

new Toolgif(".my-class", {
	width: 120,
	height: 100,
	borderRadius: 5,
	placement: "top",
	downsized: true, // File size under 2mb (see https://developers.giphy.com/docs/)
	preloader: // data url here(it's kinda long as you expect so i didn't put here)
}).toolgif();