Tipr is a small and simple jQuery tooltip plugin.


Tipr is a small and simple jQuery tooltip plugin. It works on almost any element, and it's free and open source.
Version 3.2

Simple, small, flat, cool

Tipr displays attractive tooltips, and it's around 2KB, CSS included. The tooltips can appear above or below almost any HTML element. It also reacts to the size of the viewport.

Tipr is open source and released under the MIT License, and is compatible with all modern browsers.


Hover over the Latin text below.
Odio nostrud
Ars Amatoria

Getting Started

Copy the tipr folder to your site and include the following in the <head> section of your page.
The first line loads the Roboto font from Google Web Fonts, which is optional. The second line loads the popular normalize.css, a library that forces browsers to render elements more consistently, from CDNJS. This is recommended, but again optional.

The next line loads jQuery via the Google Hosted Libraries. The remaining lines load the Tipr CSS and the Tipr jQuery plugin.

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


Adding a tooltip

Just about anything can have a tooltip.

To add a tooltip to an HTML element, add the Tipr class. The data-tip data attribute contains the tooltip text.

To include a tooltip within a block of text, you should use a <span> element.
The only restraint is that a block element should have a width or max-width property. If that isn't practical, simply use a <span> element.


The options for Tipr are set as arguments in the .tipr() method.

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


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


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 the mode inline

You can override the mode setting, and change the tooltip position, by using the data-mode data attribute.

Browser compatibility

Tipr works with Chrome 32+, Microsoft Edge, IE10+, Firefox 43+, Safari 9.1+, Opera 35+ and almost any recent browser.


We offer a range of flexible support plans for our jQuery plugins, including free.