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 of above mode
The alternate display mode
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 second line loads jQuery. The Tipr CSS and the Tipr jQuery code follows.
.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
The options for Tipr are set as arguments in the
When set to true the alternate tooltip CSS is displayed. The default is false.
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 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 speed the tooltip displays, in milliseconds. The default is 300.
The look of Tipr is set entirely via CSS.
Overriding options inline
Override the alt setting with the
data-alt data attribute.
You can override the marginAbove setting with
data-marginAbove. This should always be a minus value.
Override the mode setting with the
data-mode data attribute.
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.