web端但凡涉及到用户输入回显情景的时候，总是不可避免的会出现用户输入过长显示不完整的情况，虽然UI库会提供tips组件，但是当页面tips过多时，需要添加大量额外的dom元素，并且需要包裹在每个要显示tips的元素上，这显然是非常不友好的。
那么问题来了，什么样的tips可以开箱即用，要么自动出现在显示不完整的地方，要么在元素上加个属性就可以展示呢？
本着造轮子的精神，写下了这个组件。
使用
1、全局引入，在入口文件中引入->安装->使用(推荐)
2、局部引入，一个萝卜一个坑，哪里需要往哪里装。
插件地址胡邹邹的tips组件
使用demo胡邹邹的tips demo
参数
| 参数名 | 参数值 | 效果 |
|---|---|---|
| show-tips | - | 界定是否需要用到tips，只有具有这个属性的元素会触发tips的显示与否 |
| isShow | - | 强制显示tips，tips内容为data-tips属性值(推荐)，否则为innerHTML |
| direction | toUp | 控制tips方向为向上显示，默认值 |
| toDown | 向下显示 | |
| toLeft | 向左显示 | |
| toRight | 向右显示 | |
| data-tips | 文本 | tips要展示的内容，可以为html标签 |
| zhl-tips-max-width | 100px等宽度值 | 控制tips显示的最大宽度，默认200px |
FAQ
1、什么样的元素需要展示tips？
① 把tips内容当作补充说明的；
② 元素内容展示不完整，超出打点的；
为了隔离一些完全不可能出现tips的元素，使用show-tips作为tips出现的先决条件；
2、tips如何实现全局监听？
① 为body元素绑定事件委托，使用addEventListener方法；
② 监听body所有子元素鼠标移入mouseover事件，不能使用mouseenter和mousemove，区别可见胡邹邹的红宝书
注意在组件销毁的时候需要同步解绑委托的事件，使用removeEventListener方法；
3、tips位置？
① 使用绝对定位(全局使用)或固定定位(局部使用)，设置展示层级；
② 推荐使用getBoundingClientRect方法获取元素相对视口的距离，实测兼容ie、chrome、firefox；
写在最后
作为一个不怎么关注新闻的人最近也开始下了微博时刻关注武汉的情况。过去非典年纪尚小，印象里只有板蓝根和难喝的中药，没想到这次新型肺炎离我这么近，我在武汉读书四年、工作一年半，甚至从未想过离开武汉去其他的城市发展。武汉封城前一天回的老家，自行在家隔离，此刻深深感受到自己力量的渺小，能做的仅仅是不造谣不传谣，转发央视新闻以引起家人的重视，不管家人能不能理解，这个春节坚决不走亲访友。
希望疫情赶紧得到控制，希望武汉挺过来，希望归期不远。
