用原生TypeScript造轮子(三) tooltip

ui参考primeNG: http://primefaces.org/primeng...
ts开发环境: https://github.com/lycHub/ts-...
目录

说明

ui参考primeNG
已实现的功能:

  • 4个方向
  • 可以hover或click触发
  • 延迟显示或消失

demo和源码

思路

先把4个方向的tooltip样式都写好,方向用class控制,如果是hover触发,mouseenter的时候创建tooltip元素,mouseleave的时候销毁,
在显示前先定好位置,我这只做了4个方向居中的定位。
这组件相对前两个简单不少,只要显示的位置算的精确就没什么问题

要注意的是,因为tooltip是absolute定位,默认是append到body中,有时候用户更知道应该append到哪去,所以这方面不推荐写死,比如我这可以选择append到宿主元素里或用户自己传入的dom

你可能感兴趣的:(typescript)