Tippy is highly customizable with default options carefully configured to make it easy for anyone to get started while being fully customizable both globally and per-tooltip. Set The header should be missing, but you should still see a close link. to have no header while The header is present, but there is no close link. hides the close link. Everything can be customized according to your needs.

Tooltips can be wrapped in any element and options are specified using the html5 data containers. Here's a I don't do much..

The JavaScript:

				$(document).ready(function() {
					$('.tooltip').tippy();
				});

The HTML:

I don't do much.

Be sure to note the way the option is set inline. Below you will find a list of all available options. These options can be passed to Tippy as an object when it is first called, but if you set the option inline it needs to be in the format data-optionname. Here's another JavaScript example showing a few global options being set:

$('.tooltip').tippy({ showheader: false, autoclose: false, draggable: true });

To do that one inline, the html would look like:

This is my nifty tooltip.

That would produce This is my nifty tooltip. Notice that you can drag me around. Click the close button to the right when you are through with me..

There is no limit to what can go inside a Tippy tooltip: I can hold anything!

There is one gotcha: browsers do not like to nest block-level elements. Put a div inside a paragraph tag and it will be

.

The answer is to use the anchor option. Add a link in your paragraph where you want the tooltip, give it a class name, then outside the paragraph add the tooltip. For instance: .

				

					The answer is to use the anchor option. Add a link in your paragraph where you want the tooltip, give it a class name, then outside the paragraph add the tooltip. For instance: .
				

				

Examples

swaptitle

Using a title with a swaptitle Mouse on and off and watch the text swap around..

Mouse on and off and watch the text swap around.

img and swapimg

Use tippy with an image and a swapimg:

She loves her donuts!

She loves her donuts!

Positioning

The positioning options of Tippy are really powerful. Say you Help! I'm stuck in place! that opens in a fixed position somewhere on your page. Tippy makes it easy.

Help! I'm stuck in place!

Containers

Let's get fancy with positioning. What if you have a div and you always want your tooltips to display in that div? Not a problem. Let's make our div:

Now we need a

We will only show up in the nifty box we made for tooltips.

Since you can add classes to tooltips, you can define special styling for the tips that go in containers.

.

				
					
We will only show up in the nifty box we made for tooltips.
					
Since you can add classes to tooltips, you can define special styling for the tips that go in containers.