阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.PicTip 中文API文档

      插件 jQuery.PicTip 中文API文档 https://github.com/dfernandeza/pictip 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-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

      #pictip-demo{
          position: relative;
      }
      .spot{
        /* make it look pretty */
      }
      .spot-tooltip{
        /* make it look pretty */
      }
      

      Use the following clases for customization:

      ClassDescription
      spotSpot class
      spot-{index}Class containing the spot indetifier (spot-0, spot-1, etc)
      spot-openClass assigned to the spot when the related tooltip is open
      spot-tooltipTooltip class
      spot-tooltip-{index}Class containing the tooltip indetifier (spot-tooltip-0, spot-tooltip-1, etc)
      spot-tooltip-closeClass assigned to the tooltip close link
      spot-tooltip-contentClass 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:

      OptionDescription
      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:

      OptionDescription
      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:

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

      目录
      目录