Lightweight and Skinnable jQuery Tooltip Plugin - Tips

File Size: 7.77KB
Views Total: 1776
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight and Skinnable jQuery Tooltip Plugin - Tips

Tips is a simple and easy to skin jQuery tooltip plugin that extracts tooltip text from 'title' or 'data-tip' attribute.

Features:

  • 5 built in themes: default, youtube, facebook, flat, and bootstrap.
  • Custom the tooltip potistions: bottom or top.
  • Lightweight and easy to implement.

How to use it :

1. Include the basic and a theme CSS files on your web page.

<link rel="stylesheet" type="text/css" href="lib/jquery-tips.css">
<link rel="stylesheet" type="text/css" href="lib/themes/flatui.css">

2. The html.

<a class="tip" data-tip="Tooltip from above" data-position="top">Above</a>
<a class="tip" data-tip="Tooltip from below" data-position="bottom">Below</a>

3. Include the jQuery javascript library and jQuery Tips plugin on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/jquery-tips.js"></script>

4. Call the plugin and you're doen.

<script>
$(document).ready(function() {
$('.tip').tips();
});
</script>

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