Have ideas to improve npm?Join in the discussion! ¬Ľ



    jQuery PicTip

    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)

    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-pictip
    npm 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

        position: relative;
      /* make it look pretty */
      /* 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

        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



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


    npm i jquery-pictip

    DownloadsWeekly Downloads





    MIT and GPL

    Last publish


    • avatar