- ×
A Lightweight Responsive jQuery Tooltip Plugin
Filed under user interfaceShow Alltipso
A Lightweight Responsive jQuery Tooltip Plugin
There is also a Wordpress version of this plugin. Get it here
Getting started
Include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Requires jQuery 1.7+
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
<link rel="stylesheet" href="/path/to/animate.css">
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 ( setuseTitle: false
)You can set all the options via
data-tipso
attribute. For example if you want to change the background you will adddata-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
License
tipso is licensed under the MIT License