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

| Name | Default | Description | |---------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------| | speed | 400 | integer - Duration of the fade effect in ms | | size | '' | Tipso Bubble size classes (string: 'tiny', 'small', 'default', 'large') or you can make your own classes | | background | '#55b555' | Background color of the tooltip, it can be hex, rgb, rgba, color name | | titleBackground | '#333333' | Background color of the tooltip title, it can be hex, rgb, rgba, color name | | color | '#ffffff' | Text color of the tooltip, it can be hex, rgb, rgba, color name | | titleColor | '#ffffff' | Text color of the tooltip title, it can be hex, rgb, rgba, color name | | titleContent | '' | The content of the tooltip title, can be text, html or whatever you want | | showArrow | true | Ability to show/hide the arrow of the tooltip (true, false) | | position | 'top' | Initial position of the tooltip, available positions 'top', 'bottom', 'left', 'right' | | width | 200 | Width of the tooltip in px or % (for % add the value in quotes ex.'50%') | | maxWidth | '' | max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null | | delay | 200 | Delay before showing the tooltip in ms | | hideDelay | 0 | Delay before hiding the tooltip in ms | | animationIn | '' | CSS3 animation effect to show the tooltip using Animate.css | | animationOut | '' | CSS3 animation effect to hide the tooltip using Animate.css | | offsetX | 0 | Offset value of the tooltip on X axis | | offsetY | 0 | Offset value of the tooltip on Y axis | | tooltipHover | false | Abillity to interact with the tooltip content | | content | null | The content of the tooltip, can be text, html or whatever you want | | ajaxContentUrl | null | Url for Ajax content | | ajaxContentBuffer | 0 | Buffer timer for Ajax content | | contentElementId | null | Normally used for picking template scripts | | useTitle | false | To use the default title attribute as content (true, false) | | templateEngineFunc | null | A function that compiles and renders the content | | onBeforeShow | function(){} | Function to be executed before tipso is shown | | onShow | function(){} | Function to be executed after tipso is shown | | onHide | function(){} | Function to be executed after tipso is hidden |

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