Tipr, a Small and Simple jQuery Tooltip Plugin

Download for Free
Version 4.0
Small, simple, flat, cool. Tipr is a jQuery tooltip plugin. It works on almost any element, and it's free and open source.
Tipr displays nice tooltips, and it's around 3KB, CSS included. The tooltips can appear on almost any HTML element. Tipr reacts to the size of the viewport.

Tipr is released under the MIT License. It's free for both commercial and non-commercial use.

Tipr has wide browser support. It works with Chrome 32+, Edge 13+, IE10+, Firefox 43+, Safari 9.1+, Opera 35+ and almost any recent browser.

We offer a range of flexible support plans, including free.

The demo. Hover over the examples below.
Ars Amatoria
Timendi causa est nescire
De finibus bonoGrum et malorum
Getting Started
Copy the Tipr folder to your site and include the following in the <head> section of your page.
HTML
The first line loads normalize.css, a library that forces browsers to render elements more consistently. This is recommended, but optional. The following line loads jQuery. Then the Tipr CSS and the Tipr jQuery code are loaded.

Call the .tipr() method. Add this towards the end of the page.

HTML
Adding a tooltip
Just about anything can have a tooltip. For text you should use a <span> element. The data-tip data attribute contains the tooltip text.
HTML
To add a tooltip to an HTML element, add the Tipr class.
HTML
The only restraint comes with block elements, they should have a width or max-width property.
Options
The options for Tipr are set as arguments in the .tipr() method.
HTML
speed

The speed the tooltip displays, in milliseconds. The default is 300.

mode

The tooltip position, either above or below. The default is 'below'.

marginAbove

The margin in pixels when the mode is above. This should always be a minus value. The default is -65.

marginBelow

The margin in pixels when the mode is below. The default is 7.

space

The space at the bottom of the viewport, in pixels, at which the tooltip overrides the below position setting and displays above. The default is 70.

Appearance
The look of Tipr is set entirely via CSS, in tipr.css. We've included a couple of ready-baked themes, just replace tipr.css with a theme.
Overriding options inline
Override the mode setting with the data-mode data attribute.
HTML
You can override the marginAbove setting with data-marginAbove. This should always be a minus value.
HTML
Or data-marginBelow.
HTML