React tooltip的封装

前端页面中的tooltip一直是被广泛应用的功能，tooltip本身的dom结构万变不离其宗，最大的问题可能就是那个气泡框下面的三角形的渲染，但是对于老手来说，解决这种小问题和吃饭喝水一样简单。

// ant中tooltip的使用方法
import { Tooltip, Button } from 'antd';

ReactDOM.render(
  <div>
    <Tooltip placement="topLeft" title="Prompt Text">
      <Button>Align edge / 边缘对齐</Button>
    </Tooltip>
    <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
    </Tooltip>
  </div>,
  mountNode,
);

自从我开始使用react和antd之后，我一直很好奇antd里面的tooltip是怎么封装出来的，后来的工作中因为机缘巧合的关系，一直都没时间仔细研究一下，今天稍微花了点时间，实现和antd里面差不多的使用效果。

其实实现tooltip并不是什么很困难的事情，困难的是如何将其优雅地封装起来，如同ant中的一样，使用Tooltip模块将需要触发的实体包裹起来，对于使用者来说是最直观，最方便的使用方法。而且ant的tooltip的实现中，并不会侵入页面的原始结构。

技术难点：

1. 触发事件的注入

想要在react中实现，不入侵页面的结构的tooltip，就必须要将触发事件直接注入到props.children中，而不是在外面再包一层dom，再包一层dom会影响到css样式的编写。所以需要用到Rreact.cloneElement的Api

return (
    <>
      {React.Children.map(props.children, (child: any) => {
        return React.cloneElement(child, {
          className: child.props.className + ' tooltip-wrap-content',
          onMouseEnter: mouseIn,
          onMouseLeave: mouseOut
        });
      })}
    </>
  );

这个api可以在渲染子节点的时候主动注入自己想要传递给子节点的参数，这样就可以将触发事件注入进去了。当然不能直接覆盖子节点的事件，需要做一下代理，这里是简单写了。

2. tooltip的结构

这个其实是小问题，tooltip的结构可以分为两个问题，一个是tooltip应该渲染到哪里，一个是tooltip本身的dom结构的渲染。

在React v16中有一个createPortal的Api，可以将react节点渲染至任意dom（包括react节点）下，用这个方法的话，我们就可以避免将tooltip渲染到实体的附近了，能最大程度避免污染到原始结构。

由于采用了触发实体与tooltip渲染位置分离的结构，所以就不能直接用绝对定位来确定tooltip在窗口里的position了，需要使用fixed的定位方式。同时计算触发实体距离窗口边界的距离，直接根据窗口定位。虽然不是很有意义，但是还是将如何计算实体距离窗口边界代码贴出来好了，毕竟也曾经困扰过我一段时间：

function getOffset(dom) {
    let parent: any = dom;
    let left: number = 0;
    let top: number = 0;
    while (parent) {
      left += parent.offsetLeft;
      top += parent.offsetTop;
      parent = parent.offsetParent;
    }
    return {
      left, top, 
      width: dom.offsetWidth,
      height: dom.offsetHeight
    };
  }

只要搞清楚offsetParent，offsetLeft，offsetTop，offsetWidth，offsetHeight代表的意义就不难看懂上面的代码了。