Basic Any Content Tooltip Plugin With jQuery

A simple yet feature-rich jQuery plugin used to create CSS3 animated, pretty-nice, hover-triggered tooltips from any content types.

Features:

• 2 animations based on CSS3: Fade and Shake.
• Custom tooltip position: Right, Left, Top and Bottom.
• Supports any tooltip sources: html, url, iframe, text, selector, function, etc.
• 3 colors: default, green and blue.

Basic usage:

1. Add references to JQuery library and the Tooltip Basic's JavaScript & CSS files:

<link rel="stylesheet" href="jquery.tooltip.basic.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.tooltip.basic.min.js"></script>

2. Create a basic tooltip and attach it to your element:

<span id="demo">Hover Me</span>

$("#demo").tooltip({
  value: '<b>Tooltip Content</b>'
});

3. Sometimes you might need to load an external URL to the tooltip:

$("#demo").tooltip({
  value: 'https://google.com',
  type: 'url'
});

4. All default options to customize the tooltip.

$("#demo").tooltip({

  // none, fade, shake
  animation: 'none',      

  // default, green, blue
  class: 'default',       

  // right, left, top, bottom
  position: 'right',  

  // html, url (iframe),
  // selector (ID/class),
  // function (show javascript result on every hover),
  // functionOnce (show javascript result one time only)    
  type: 'html',           

  // text, url link or a selector value
  value: '',              

  // a valid CSS unit like '200px', '10em' etc.
  width: '200px',         

  // font weight
  weight: 'bold'       

});

---

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