提示 / Tip

Tip 组件
如何标识目标
只需要给目标 DOM 添加样式类tooltips即可

<div class="container">
  <div class="content"></div>
</div>

require(['jquery', 'moye/Tip'], function ($, Tip) {

  var content = $('.content');

  for (var i = 0; i < 5; i++) {
    for (var j = 0; j < 6; j++) {
      $('<div>')
        .addClass(['tooltips', j === 0 ? 'tooltips-first' : ''].join(' '))
        .text('自动定位')
        .appendTo(content);
    }
  }
  
  var tip = new Tip({
    arrow: '1',
    hideDelay: 20,
    showDelay: 10,
    offset: {x: 5, y: 2}
  })
  .render()
  .on('beforeshow', function (e) {
    this.setContent(Math.random());
  });
  
});

方位关系

你可以通过将目标元素添加data-tooltips属性来指定Tip的定位关系

Tip 支持多种定位关系，大体上分为两个部分：

1. Tip 位于目标的哪个方位，也就是 top / bottom / left / right，简写为 t / b / l / r；
2. Tip 如何与目标对齐，也就是 left / center / right，或者是 top /center / bottom, 简写就是 l / c / r 和 t / c / b；

将这两个简写定位合并起来就是Tip的定位标识。

例子1：tc，就是 top + center，也就是Tip位于目标的顶部，居中对齐

例子1：lb，就是 left + bottom，也就是Tip位于目标的左侧，底部对齐

效果如下边这个效果：

<div class="container">
  <div id="cube" class="tooltips" data-tooltips="lc" onclick="">单击切换模式:lc</div>
</div>

require(['moye/Tip'], function (Tip) {

  var $ = require('jquery');
  var content = $('.content');

  for(var i = 0; i < 5; i++) {
    for(var j = 0; j < 6; j++) {
      $('<div>')
        .addClass(['tooltips', j === 0 ? 'tooltips-first' : ''].join(' '))
        .text('自动定位')
        .appendTo(content);
    }
  }

  var tip = new Tip({
    arrow: '1',
    hideDelay: 20,
    showDelay: 10,
    offset: {x: 5, y: 2}
  })
  .render()
  .on('beforeshow', function (e) {
    this.setContent(Math.random());
  });

  var arrow = {
    tl: 'tc',
    tc: 'tr',
    tr: 'rt',
    rt: 'rc',
    rc: 'rb',
    rb: 'br',
    br: 'bc',
    bc: 'bl',
    bl: 'lb',
    lb: 'lc',
    lc: 'lt',
    lt: 'tl'
  };

  $('#cube').on('click', function () {
    var $this = $(this);
    var direction = arrow[$this.attr('data-tooltips')];
    $this.attr('data-tooltips', direction).text('单击切换模式:' + direction);
  });
  
});

静态模式

这个模式是只能通过javascript来控制Tip的显示或隐藏，也就是说鼠标的hover动作不管用了。这种模式可以作为表单元素校验出错的提示信息。

<div class="container">
  <button id="static-show">显示</button>
  <button id="static-hide">隐藏</button>
  <button id="static-destroy">销毁</button>

  <input type="text" id="static-target" placeholder="I'm target">
</div>

require(['jquery', 'moye/Tip'], function ($, Tip) {
  // static tip
  var staticTip = new Tip({
    arrow: false,
    target: $('#static-target'),
    hideDelay: 1,
    mode: 'static',
    content: '上传成功~'
  })
  .render();

  $('#static-show').click(function () {
    staticTip.show();
  });

  $('#static-hide').click(function () {
    staticTip.hide();
  });

  $('#static-destroy').click(function () {
    staticTip.destroy();
  });
});