Tipr, a Small and Simple jQuery Tooltip Plugin

Download for Free
Version 4.0.1
Small, simple, flat, cool. Tipr is a jQuery tooltip plugin. It works on almost any element, and it's free and open source. There's a demo below.
Normal demo
A demo, above mode
Can be almost any element
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.

Getting Started
Copy the Tipr folder to your site and include the following in the <head> section of your page.
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.

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.
To add a tooltip to an HTML element, add the Tipr class.
The only restraint comes with block elements, they should have a width or max-width property.
The options for Tipr are set as arguments in the .tipr() method.

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


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


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


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


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.

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.
You can override the marginAbove setting with data-marginAbove. This should always be a minus value.
Or data-marginBelow.