1.1.0 • Published 9 years ago
jquery-pictip v1.1.0
jQuery PicTip
jQuery PicTip is a plugin that adds handy tooltips to your images, slideshows, sliders and more.
Features
- 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)
Getting Started
- Include the jQuery library and the PicTip plugin on your page. It can also be installed using Bower or npm:
bower install jquery-pictipnpm install jquery-pictip- Call the pictip() method on the jQuery element that contains your image(s). Let me show you an example:
The HTML
<div id="pictip-demo"> </div>The CSS
#pictip-demo{
position: relative;
}
.spot{
/* make it look pretty */
}
.spot-tooltip{
/* make it look pretty */
}Use the following clases for customization:
| 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 |
The JavaScript
$("#pictip-demo").pictip({
spots: [
{
top: '50px',
left: '20px',
content: 'Hello!',
tooltipPosition:'br' //bottom-right
}
]
});The complete set of options:
| 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.
Spots set of options:
| 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 |
The API
Accessing the PicTip instance.
// You can access the instance with:
var pictip = $("#pictip-demo").data('pictip');You can access the following methods of the instance:
| Method | Description |
|---|---|
| init Function: function (options) {...} | Initialize the plugin instance |
| closeToolTips Function: function () {...} | Close all open tooltips |
| destroy Function: function () {...} | Destroy the plugin instance |
Changelog
v0.3.0
- 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)
v1.0.0
- Adding performance improvements for responsive sites
v1.1.0
- Adding "open by default" option
Contributing
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.
License
Copyright (c) 2015 Daniel Fernández A. Dual licensed under the MIT and GPL licenses.
1.1.0
9 years ago