一、背景

之前学习echarts时，看到相关文章能够实现，但是，后来想重新实现该功能，发现很难找到之前那篇文章，因此，记录下来，留作后续使用。

由于设计稿规划好echarts展示的内容位置（可能较小 300px300px），因此，在展示tooltip的时候，可能会存在悬浮框超出内容位置，而导致被隐藏的可能，所以，可以通过设置tooltip的position来实现展示的位置不超过展示内容位置（如300px 300px，也就是不会溢出而被隐藏）

二、技术实现

tooltip: {
  position: function(point, params, dom, rect, size) {
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
      x = 5;
    } else {
      // 左边放的下
      x = pointX - boxWidth;
    }
    // boxHeight > pointY 说明鼠标上边放不下提示框
    if (boxHeight > pointY) {
      y = 5;
    } else {
      // 上边放得下
      y = pointY - boxHeight;
    }
    return [x, y];
  }
}