Title Enabled Responsive jQuery Tooltip Plugin – Tipso

Tipso is lightweight and responsive jQuery plugin for the tooltip that supports title for the tooltip. You can modify the size, colour, position etc for the tooltip accordingly. Tipso is CSS3 animation supported with animate.css.

Features:

• Lightweight and easy to implement.
• Fully responsive supports on all modern devices.
• Supports to change colour, background, position, size and many more.
• Tooltip content can be fetched from a URL with ajaxContentUrl.
• Supports buffer time while loading content from ajaxContentUrl.

How to use it:

1. Include the Javascript tipso.min.js at the bottom of the web page.

<script src="path/to/tipso.min.js"></script>

2. Include the CSS tipso.min.css in the header of the page.

<link rel="stylesheet" href="path/to/tipso.min.css">

3. You can use CSS3 animation to tipso with Animate.css.

<link rel="stylesheet" href="path/to/animate.css">

4. Add the basic HTML to the page.

<span class="tipso" data-tipso="This is a default TIPSO!">Default Tipso</span>

5. Initialize the plugin and we’re ready to go.

$('.tipso').tipso();

API

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

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

// Hide/Close the tipso tooltip from inside the tooltip
// and/or without hideDelay timeout
$('.tipso').tipso('close');
// or as alternative
$('.tipso').tipso('hide', true);

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

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

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

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

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

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

Plugin’s default options: