Basic Any Content Tooltip Plugin With jQuery

File Size: 24.8 KB
Views Total: 1573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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>
  value: '<b>Tooltip Content</b>'

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

  value: '',
  type: 'url'

4. All default options to customize the 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.