tooltip插件

Intro

简单易用的tooltip插件，支持添加额外类名，支持自定义arrow，支持八个方向，显示和隐藏回调，两级参数控制，灵活调用

Author

name: ZhanGu
concat:[email protected]

Options

/**
 * tooltip 组件
 * @param {string}    showHandle: 显示句柄，默认'mouseenter',
 * @param {string}    hideHandle: 隐藏句柄，默认'mouseleave',
 * @param {Boolean}    custom: 自定义句柄，false,
 * @param {string}    customHtml: 自定义句柄html，custom true有效,
 * @param {string}    direc: 提示方向，'top',
 * @param {number}    leftOffset: 水平偏移量0,
 * @param {number}    topOffset: 垂直偏移量0,
 * @param {string}    className: 添加类名'',
 * @param {function}    showCallback: 显示回调function(){},
 * @param {function}  hideCallback: 隐藏回调function(){},
 * @param {object} list: {
        'tip1': { // data-tooltip='tip1'
            custom: false,
            customHtml: '',
            direc: 'top',
            leftOffset: 0,
            topOffset: 0,
            className: '',
            showCallback: function(){},
            hideCallback: function(){}
        }
    }
 */

Usage

  <div class="J_tip">
      tooltip插件，包括
      <a href="javascript:;" data-tooltip="tip1">上面弹出</a>
      <a href="javascript:;" data-tooltip="tip2">右面弹出</a>
      <a href="javascript:;" data-tooltip="tip3">下面弹出</a>
      <a href="javascript:;" data-tooltip="tip4">左面弹出</a>
      <a href="javascript:;" data-tooltip="tip5">左上弹出</a>
      <a href="javascript:;" data-tooltip="tip6">右上弹出</a>
      <a href="javascript:;" data-tooltip="tip7">左下弹出</a>
      <a href="javascript:;" data-tooltip="tip8">右下弹出</a>
  </div>

var options = {
  className: 'zoomIn',
  list: {
      'tip1': {
          content: '两级参数控制<br>可以给tooltip添加自定义类名'
      },
     'tip2': {
          direc: 'right',
          className: 'fadeIn',
          custom: true,
          customHtml: '<span style="position: relative;left:-21px;color:#fff;background-color:#000">&lt;&lt;&lt;</span>',
          content: '可以自定义arrow'
      },'tip3': {
          content: 'data-tooltip的值和list的键名是对应的',
          leftOffset: 0,
          topOffset: 0,
          direc: 'bottom',
          className: ''
      },'tip4': {
          content: '设置了偏移',
          leftOffset: 10,
          topOffset: 10,
          direc: 'left',
          className: 'fadeIn'
      },'tip5': {
          content: '偏移量20px',
          leftOffset: 20,
          topOffset: 20,
          direc: 'topLeft',
          className: ''
      },'tip6': {
          content: 'tip1',
          leftOffset: 20,
          topOffset: 20,
          direc: 'topRight',
          className: ''
      },'tip7': {
          content: 'tip1',
          leftOffset: 20,
          topOffset: 20,
          direc: 'bottomLeft',
          className: ''
      },'tip8': {
          content: '，支持动态元素，可以调节提示的位置（距离），鼠标移到左边的四个按钮可以看到效果。',
          leftOffset: 20,
          topOffset: 20,
          direc: 'bottomRight',
          className: ''
      }
  }
};
//$('.J_tip').tooltip(options);
$('.J_tip').IUI('tooltip', options);