Super Simple and Clean jQuery Tooltip Plugin - Tipr

Tipr is an extremely simple and lightweight jQuery plugin that attaches clean and flat tooltips to almost any HTML element by using data-tip attribute. The tooltips are fully customizable via css.

How to use it:

1. Include jQuery library and jQuery Tipr plugin after jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="tipr/tipr.css">
<script type="text/javascript" src="tipr/tipr.js"></script>

2. The HTML. Using data-tip attribute to add tooltips to your elements

<span class="tip" data-tip="Dolor amet">Lorem ipsum</span>

3. Call the plugin

$(document).ready(function() {
  $('.tip').tipr();
});

4. Default settings.

$(document).ready(function() {
  $('.tip').tipr({
  
   // The space at the bottom of the viewport, in pixels
   'space': 70,

   // animation speed
   'speed': 200,

   // positions
   'mode': 'bottom'
  
  });
});

Change logs:

2017-11-24

• Version 3.2

2017-05-31

• Version 3.1

2017-02-09

• Version 3.0

2015-06-25

• Version 2.0.1

2015-04-15

• Version 2.0

2015-02-18

• Version 1.1

2014-07-05

• Minor updates

---

This awesome jQuery plugin is developed by Tipue. For more Advanced Usages, please check the demo page or visit the official website.