Overview

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
Very small in size (just 4KB minified)

How it Works

PicTip provides a simple way to initialize the plugin, just call the method pictip() on a jQuery element. This method accept an options object. Let me show you an example:

The HTML

<div id="pictip-demo"> </div>

The CSS

#pictip-demo{
    position: relative;
}

Use the following clases for customization:
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:
spots [ Array: [] ]	Spots object array. Refer to the next table for more information.
spotClass [ String: '.spot' ]	Spots class.
spotTemplate [ String: '<a></a>' ]	HTML template to create the spots.
eventType [ String: 'click' ]	Event type to trigger the tooltip/caption display action (posible values are click and hover).
tooltip [ Boolean: true ]	Display tooltip or caption? (use caption for a better mobile experience).
onShowToolTip [ Function: function (spot, tooltip) {} ]	Function executed after the tooltip has opened
onCloseToolTip [ Function: function (spot, tooltip) {} ]	Function executed after the tooltip has closed

So, spots object array?

The spots set of options:
top [ Number: 0 ]	Spot top position
left [ Number: 0 ]	Spot left position
content [ String: '' ]	Tooltip content
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

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:
init [ Function: function (options) {...} ]	Initialize the plugin instance
closeToolTips [ Function: function () {...} ]	Close all open tooltips
destroy [ Function: function () {...} ]	Destroy the plugin instance

Yes I know this is easy!

Browser compatibility

IE 8+
Firefox
Opera
Safari
Chrome