jQuery PicTip Plugin (beta)

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 5KB 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