Tippy for jQuery

Created by Chris Roberts

Tippy makes it very easy to create This is quite easy., Still easy., and There are many ways to configure this thing, and all are easy! tooltips for any website using jQuery.

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

This won't work right.

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: .

There should be no problem with this tooltip or its contents. Hopefully you can see that Tippy is:

Simple
Flexible
Powerful

				
					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: .
				

				
					There should be no problem with this tooltip or its contents. Hopefully you can see that Tippy is:
					
						Simple
						Flexible
						Powerful

Here are all of the options available with Tippy. If a default is set, it is shown in parenthesis. If multiple values are possible, they are all listed with the default shown first. Some options only make sense if set globally; those are marked with *.

*multitip (false/true)
: If true, multiple tooltips can be displayed at once.
autoshow (false/true)
: If true, the tooltip or tooltips will automatically show when the page loads.
showtitle (false/true)
: Whether or not to use the title attribute in links. Good for accessibility, bad for visibility.
hoverpopup (true/false)
: If true, tooltip displays when hovering over the link. If false, tooltip displays when the link is clicked.
showdelay (100)
: Adds a slight delay before displaying the tooltip to prevent popping up tooltips when the mouse moves across the page.
showspeed (200)
: How long it takes in ms for the tooltip to fade in.
hidespeed (200)
: How long it takes in ms for the tooltip to fade out.
autoclose (true/false)
: Whether or not the tooltip should automatically close after a delay.
hidedelay (1000)
: How long it takes in ms before the tooltip begins to auto fade out.
container
: By default, the tooltip is placed in the DOM right where you set it but if you want to use Tippy for specific positioning, you can change its parent element by specifying a CSS selector here.
position ('link/mouse/css position value')
: Specifies where the tooltip should be positioned. If set to link or mouse, the x and y values are automatically determined.
top
: Useful when position set to fixed, absolute, or relative.
bottom
: Useful when position set to fixed, absolute, or relative.
left
: Useful when position set to fixed, absolute, or relative.
right
: Useful when position set to fixed, absolute, or relative.
offsetx (10)
: Set a default horizontal offset for the tooltip position. Useful when position set to link or mouse.
offsety (10)
: Set a default vertical offset for the tooltip position. Useful when position set to link or mouse.
width
: Specify a width for the tooltip. The default is set in jquery.tippy.css.
height
: Specify a height for the tooltip. The default is set in jquery.tippy.css.
draggable (false/true)
: Allow visitors to drag the tooltip around. Useful when autoclose is false. Requires jQuery UI.
dragheader (true/false)
: If draging is enabled and this is set to true, tooltip will only be draggable from the header bar. If false, visitors can drag from any part of the tooltip.
anchor
: Optional CSS selector specifying the link element that will trigger Tippy.
title
: Sets the text shown on the link and in the header.
swaptitle
: Alternate title to use when the visitor hovers over the link.
img
: Tippy can be used with images rather than text; set img to the url of an image to display Tippy on an image.
swapimg
: Like swaptitle, swapimg switches to an alternate image when a visitor hovers over the link.
href
: If href is set, the Tippy link will point to this url.
target
: Specifies the link target for the Tippy link.
showheader (true/false)
: Whether or not the tooltip should show a header.
headertitle
: By default, the header is set to the tooltip title. With headertitle, you can set specific text for the title.
headerhref
: If headerhref is set, the tooltip header text will be a link pointing to this url.
showclose (true/false)
: Whether or not the tooltip have a close link. Usefor for mobile devices or when autoclose is false.
closetext ('close')
: The text to display for the close link.

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.