jQuery PicTip is a plugin that adds handy tooltips to your images, slideshows, sliders and more.
- Easy configuration and customization
- Easy integration with slideshows, sliders, 360 views, and more
- Support for captions and bubble tooltips
- Add any content type to tooltips/captions
- Event type options (hover/click)
- Change tooltip position relative to spot
- Create spots with your own HTML markup
- CSS transitions/Animations are supported
- Built with performance in mind
- Responsive-friendly
- Very small (just 4kb minified)
- Include the jQuery library and the PicTip plugin on your page. It can also be installed using Bower or npm:
bower install jquery-pictip
npm install jquery-pictip
- Call the pictip() method on the jQuery element that contains your image(s). Let me show you an example:
<div id="pictip-demo"> </div>
#pictip-demo{
position: relative;
}
.spot{
/* make it look pretty */
}
.spot-tooltip{
/* make it look pretty */
}
Class | Description |
---|---|
spot | Spot class |
spot-{index} | Class containing the spot indetifier (spot-0, spot-1, etc) |
spot-open | Class assigned to the spot when the related tooltip is open |
spot-tooltip | Tooltip class |
spot-tooltip-{index} | Class containing the tooltip indetifier (spot-tooltip-0, spot-tooltip-1, etc) |
spot-tooltip-close | Class assigned to the tooltip close link |
spot-tooltip-content | Class assigned to the tooltip content container |
$("#pictip-demo").pictip({
spots: [
{
top: '50px',
left: '20px',
content: 'Hello!',
tooltipPosition:'br' //bottom-right
}
]
});
Option | Description |
---|---|
spots [ Array: [] ] | Spots object array. Refer to the next table for more information. |
spotClass [ String: '.spot' ] | Spots class. |
spotTemplate [ String: '' ] | HTML template to create the spots. |
eventType [ String: 'click' ] | Event type to trigger the tooltip/caption display action (posible values are click and mouseenter). |
tooltip [ Boolean: true ] | Display tooltip or caption? (use caption for a better mobile experience). |
show [ Function: function (tooltip) {} ] | Function that overrides the plugin default show functionality. |
close [ Function: function (tooltip) {} ] | Function that overrides the plugin default close functionality. |
onShowToolTip [ Function: function (spot, tooltip) {} ] | Function executed after the tooltip has opened |
onCloseToolTip [ Function: function (spot, tooltip) {} ] | Function executed after the tooltip has closed |
Functions onShowToolTip and onCloseToolTip are not executed if show and close functions are defined.
Option | Description |
---|---|
top [ Number: 0 ] | Spot top position |
left [ Number: 0 ] | Spot left position |
content [ String: '' ] | Tooltip content. Add any content type |
tooltipPosition [ String: '' ] | Tooltip position relative to spot. (tl, tr, tc, bl, br, bc, cl, cr) |
tooltipId [ String: '' ] | Tooltip ID |
tooltipCss [ Object: {} ] | CSS styling for the tooltip |
tooltipClose [ Boolean: false ] | Set this to true if you want the tooltip close link |
open [ Boolean: false ] | Set this to true if you want the tooltip to be open on page load |
Accessing the PicTip instance.
// You can access the instance with:
var pictip = $("#pictip-demo").data('pictip');
Method | Description |
---|---|
init [ Function: function (options) {...} ] | Initialize the plugin instance |
closeToolTips [ Function: function () {...} ] | Close all open tooltips |
destroy [ Function: function () {...} ] | Destroy the plugin instance |
- Adding CSS transitions/animations support (through the new show and close configuration options)
- Adding position class to tooltip elements in order to describe the tooltip position (relative to spot)
- Adding performance improvements for responsive sites
- Adding "open by default" option
If you'd like to contribute to this project, create a branch and send a pull request for that branch. Hint and test your code.
Any problems, please, let me know.
Copyright (c) 2015 Daniel Fernández A. Dual licensed under the MIT and GPL licenses.