Home
Products
Grids
Blog
Support
Donate
About
   

Tipr

Download
V. 4.1
Tipr. A small and simple jQuery tooltip plugin. It's free and open source.
Small, simple, flat, cool. Tipr is a jQuery tooltip plugin. It works on almost any element, and reacts to the size of the viewport. Tipr is free and open source.

A demo

Hover here
A demo of above mode
The alternate display mode

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 second line loads jQuery. The Tipr CSS and the Tipr jQuery code follows.

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
alt

When set to true the alternate tooltip CSS is displayed. The default is false.

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.

mode

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

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.

speed

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

Appearance

The look of Tipr is set entirely via CSS.

Overriding options inline

Override the alt setting with the data-alt data attribute.
HTML
You can override the marginAbove setting with data-marginAbove. This should always be a minus value.
HTML
Or data-marginBelow.
HTML
Override the mode setting with the data-mode data attribute.
HTML

Browsers, support

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