tipso

A Lightweight Responsive jQuery Tooltip Plugin

There is also a Wordpress version of this plugin. Get it here

Getting started

1. Include jQuery

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

   Requires jQuery 1.7+

2. Include plugin's code

   <link rel="stylesheet" href="/path/to/tipso.css">
   <script src="/path/to/tipso.js"></script>

To use css3 animation effects please include Animate.css

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

3. Call the plugin

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

##Usage

Additionaly you can use data-tipso instead of the title attribute for the tooltip content ( set useTitle: false )

You can set all the options via data-tipso attribute. For example if you want to change the background you will add data-tipso-background="#555555" to the element.

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');

Demo

Here is the link to the demo

Bugs

For bug reports, questions, feature requests, or other suggestions please create an issue on GitHub.

Author

Bojan Petkovski

Contributors

auxiliary

License

tipso is licensed under the MIT License