Simple Responsive jQuery Tooltip Plugin - Tipso

Tipso is a simple jQuery/HTML5/CSS3 tooltip plugin that displays a responsive, animated, fully customizable tooltip when the visitor hovers over (or clicks on) the matched element.

How to use it:

1. Include jQuery library and the jQuery tipso plugin's JavaScript and CSS in the document.

<link href="src/tipso.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/tipso.min.js"></script>

2. Load the animate.css for CSS3 animations.

<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"></script>

3. Use element's title or data-tipso attributes to set the content to be displayed in the tooltip.

<span class="demo" title="tipso" data-tipso="I'm a tooltip">Hover me</span>

4. Call the plugin on the element and customize the tooltip using JS options object.

$('.demo').tipso({
// OPTIONS
});

5. All the customization options.

// animation speed in ms
speed: 400,

// background color
background  : '#55b555',

// text color
color: '#ffffff',

// title color
titleColor: '#ffffff',

// content of the title bar
titleContent: '',       

// show arrow
showArrow         : true,    

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

// width
width: 200,

// max-width of the tooltip in px or % (for % add the value in quotes ex.'50%').
maxWidth: '',

// animation delay
delay: 200,

// hide animation delay
hideDelay: 0,

// CSS3 animation effect to show the tooltip
// Requires Animate.css
animationIn: '',

// CSS3 animation effect to hide the tooltip
// Requires Animate.css
animationOut: '',

// x offset
offsetX: 0,

// y offset
offsetY: 0,

// arrow width
arrowWidth: 8,

// Abillity to interact with the tooltip content
tooltipHover: false,

// custom tooltip content
content: null,

// Url for Ajax content
ajaxContentUrl  : null,

ajaxContentBuffer : 0,

// Normally used for picking template scripts
contentElementId  : null,         

// use element's title attribute
useTitle: true,

// a function that compiles and renders the content
templateEngineFunc: null,       
  
// callbacks
onBeforeShow: null,
onShow: null,
onHide: null

6. APIs.

// Show the tipso tooltip
$('.tipso').tipso('show');

// Hide the tipso tooltip
$('.tipso').tipso('hide');

// Close the tipso tooltip
$('.tipso').tipso('close');

// Destroy tipso tooltip
$('.tipso').tipso('destroy');

// Update tipso options
$('.tipso').tipso('update', 'content', 'new content');

// Add a callback before tipso is shown
$('.tipso').tipso({
  onBeforeShow: function(){
      // Your code
  }
});

// Add a callback when tipso is shown
$('.tipso').tipso({
  onShow: function(){
      // Your code
  }
});

// Add a callback when tipso is hidden
$('.tipso').tipso({
  onHide: function(){
      // Your code
  }
});

// Load AJAX content to tipso
$('.tipso').tipso({ 
  useTitle: false,
  ajaxContentUrl : 'ajax.html'
});

Change logs:

v1.0.8 (2015-11-11)

• Fixed calback $element,element issue, added new method close

v1.0.7 (2015-10-31)

• Fixed resize event, mobile touch issue, added option hideDelay

v1.0.6 (2015-09-13)

• Added wordwrap-break support for long words
• Fixed Var for Bottom Position

v1.0.5 (2015-05-10)

• Added more options & API.

v1.0.4 (2015-02-26)

• Added Check for css3 animation

v1.0.2 (2015-02-16)

• Added css3 Animations

v1.0.1 (2014-12-25)

• removed unused variables

---

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