View on GitHub

Pictip

jQuery PicTip is a plugin that adds handy tooltips to your images, slideshows, sliders and more.

Download this project as a .zip file Download this project as a tar.gz file

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)

Try the demo

Getting Started

Include the jQuery library and the PicTip plugin on your page. It can also be installed using Bower:

          bower 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.