小莫的成神之旅（一）原生js封装组件tooltip

小莫碎碎念

小莫第一次写技术博客无甚经验，望诸位大神和小白同僚莫要见怪，鉴于希望小莫日后能不忘初衷，每篇博客开头都有雷打不动的常设模块“小莫碎碎念”，关注技术的同僚可以绕过，这个模块基本没什么有用的，咳咳。

小莫最近在做的项目中用了ng2-bootstrap，经常会用到tooltip，但bootstrap的tooltip有一个缺憾，就是在鼠标悬浮在tip上的时候tip就消失了了，bootstrap的解释是移动端不需要鼠标悬浮的功能，小莫从网上查了很多解决方案，但都是基于js的，没有基于ts的，小莫才疏学浅又不愿意动源码，当然也是为了方便小莫学习原生js，小莫当下决定自己用js封装一个tooltip组件。

其实小莫在查阅资料的时候大多不会看实现思路和心路历程之类的前提，都会直接看结果，相信很多同僚和小莫一样只关注结果，但在封装组件的过程中小莫的确遇到了一些不大不小的问题，为了方便记忆也为了整理出一套思考问题的方法，小莫决定从头到尾详细记录，只关注结果的同僚请绕过“实现思路”。

好！碎碎念完毕，进入主题！

实现思路

tooltip是一个相对比较简单的功能，主要需要实现以下三个功能点：

1.tip的弹出和隐藏；

2.tip弹出位置和内容自定义；

3.相关css实现。

第一条和第二条细分又可分为以下几点：

1.鼠标悬浮，弹出tip；

2.鼠标移开，隐藏tip；

3.鼠标移到tip上，tip不隐藏；

4.鼠标移出tip，tip隐藏；

5.从目标元素的上下左右弹出tip。

首先，要实现鼠标over和leave目标元素后，tip的显示和隐藏，分别用onmouseenter和onmouseleave；然后，判断鼠标是否over在tip区域，如果在tip上，tip不隐藏，否则反之，这里要注意添加鼠标leave tip后，tip隐藏的事件；最后，确定tip的弹出位置和内容。

最终代码

css不做赘述直接上代码：

 1 .tooltip{position:absolute;max-width:300px;z-index:999;}
 2 
 3 .tip-content{border:1px solid gray;border-radius: 6px;box-shadow: 0 5px 10px rgba(0,0,0,.2);padding:5px;background-color: #ffffff;}
 4 .tip-arrow{
 5     position:absolute;
 6     border:7px solid transparent;
 7 }
 8 .tip-arrow:after{
 9     position:absolute;
10     content:'';
11     width:0;height:0;
12     box-sizing:border-box;
13     border:7px solid transparent;
14 }
15 
16 .tip-content.top{
17     margin-bottom:7px;
18 }
19 .tip-arrow.top{
20     border-bottom-width:0;bottom: 0;left:50%;margin-left: -7px;
21     border-top-color:gray;
22 }
23 .tip-arrow.top:after{
24     margin-left:-7px;
25     margin-top:-8px;
26     border-bottom-width:0;
27     border-top-color:#fff;
28 }
29 
30 .tip-content.bottom{
31     margin-top:7px;
32 }
33 .tip-arrow.bottom{
34     border-top-width:0;top: 0;left:50%;margin-left: -7px;
35     border-bottom-color:gray;
36 }
37 .tip-arrow.bottom:after{
38     margin-left:-7px;
39     margin-top:1px;
40     border-top-width:0;
41     border-bottom-color:#fff;
42 }
43 
44 .tip-content.left{
45     margin-right:7px;
46 }
47 .tip-arrow.left{
48     border-right-width:0;right: 0;top:50%;margin-top: -7px;
49     border-left-color:gray;
50 }
51 .tip-arrow.left:after{
52     margin-left:-8px;
53     margin-top:-7px;
54     border-right-width:0;
55     border-left-color:#fff;
56 }
57 
58 .tip-content.right{
59     margin-left:7px;
60 }
61 .tip-arrow.right{
62     border-left-width:0;left: 0;top:50%;margin-top: -7px;
63     border-right-color:gray;
64 }
65 .tip-arrow.right:after{
66     margin-left:1px;
67     margin-top:-7px;
68     border-left-width:0;
69     border-right-color:#fff;
70 }

tooltip css

js也直接上代码：

 1 function getElementPos(el) {
 2             let _x = 0, _y = 0;
 3             do {
 4                 _x += el.offsetLeft;
 5                 _y += el.offsetTop;
 6             } while (el = el.offsetParent);
 7             return { x: _x, y: _y };
 8         }
 9 
10         var ToolTip = function(){
11             var obj = {};
12             obj.tip = null;
13             obj.showTip = function(el,html){
14                 if(obj.tip){
15                     return;
16                 }
17                 var elPos = getElementPos(el);
18                 var posi = el.getAttribute('posi')?el.getAttribute('posi'):"top";
19                 var tip = document.createElement("div");
20                 tip.className = 'tooltip';
21                 var arrow = document.createElement("div");
22                 arrow.className = 'tip-arrow '+posi;
23                 var content = document.createElement("div");
24                 content.className = 'tip-content '+posi;
25                 tip.appendChild(content);
26                 tip.appendChild(arrow);
27                 content.innerHTML = html;
28                 document.body.appendChild(tip);
29                 switch (posi){
30                     case "top":{
31                         tip.style.top = (elPos.y - content.offsetHeight - 7) + 'px';
32                         tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
33                     }
34                         break;
35                     case "bottom":{
36                         tip.style.top = (elPos.y + el.offsetHeight) + 'px';
37                         tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
38                     }
39                         break;
40                     case "left":{
41                         tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
42                         tip.style.left = (elPos.x - content.offsetWidth - 7) + 'px';
43                     }
44                         break;
45                     case "right":{
46                         tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
47                         tip.style.left = (elPos.x + el.offsetWidth) + 'px';
48                     }
49                         break;
50                 }
51 
52                 tip.addEventListener("mouseenter",function(){
53                     tip.setAttribute("in",true);
54                 });
55                 tip.addEventListener("mouseleave",function(){
56                     tip.setAttribute("in",false);
57                     obj.hideTip();
58                 });
59 
60                 obj.tip = tip;
61             };
62             obj.hideTip = function () {
63                 if(this.tip && this.tip.getAttribute("in") != "true"){
64                     document.body.removeChild(this.tip);
65                     obj.tip = null;
66                 }
67             };
68             obj.init = function(el){
69                 el.onmouseenter = function(){obj.showTip(this, this.getAttribute('tipContent'))};
70                 el.onmouseleave = function(){
71                     setTimeout(function(){
72                         obj.hideTip();
73                     },0);
74 
75                 };
76             };
77 
78             return obj;
79         }

tooltip js

html代码（有的时候小莫这样的小白面对封装好的组件却不会用，那心情相当沉重）：

 1 <div class="container" posi = "bottom" name="tip" tipContent="this <br> <button>diandian</button>  is a long long long long long <br> long long long long long long tool tip.">hover me</div>
 2 <div class="container" posi = "left" name="tip" tipContent="this is a tool tip2.">hover me2</div>
 3 <div class="container" posi = "right" name="tip" tipContent="this <br>  is a long long long long long <br> long long long long long long tool tip3.">hover me3</div>
 4 <div class="container" posi = "top" name="tip" tipContent="this is a tool tip4.">hover me4</div>
 5 
 6 <script>
 7     var conArr = document.getElementsByName("tip");
 8     if(conArr) {
 9         for (var i = 0; i < conArr.length; i++) {
10             var tip = new ToolTip();
11             tip.init(conArr[i]);
12         }
13     }
14 </script>

tooltip html

顺便附上ts版tooltip：

 1 import {Directive, ElementRef, Input, HostListener} from "@angular/core";
 2 
 3 @Directive({
 4     selector: '[tooltip]'
 5 })
 6 export class ToolTip{
 7 
 8     @Input('tooltip')
 9     tooltipCon: string;
10 
11     private tip;
12 
13     constructor(private elRef: ElementRef) {}
14 
15     @HostListener('mouseenter') onMouseEnter() {
16         this.show();
17     }
18 
19     @HostListener('mouseleave') onMouseLeave() {
20         let self = this;
21         setTimeout(function(){
22             self.hide();
23         },0);
24     }
25 
26     show(){
27         let el = this.elRef.nativeElement as HTMLElement;
28         if(this.tip){
29             return;
30         }
31         let posi = el.getAttribute('posi')?el.getAttribute('posi'):"top";
32         let elPos = this.getElementPos(el);
33         let self = this;
34 
35         let tip = document.createElement("div");
36         tip.className = 'tip-container';
37         let arrow = document.createElement("div");
38         arrow.className = 'tip-arrow '+posi;
39         let content = document.createElement("div");
40         content.className = 'tip-content '+posi;
41         tip.appendChild(content);
42         tip.appendChild(arrow);
43         content.innerHTML = this.tooltipCon;
44         document.body.appendChild(tip);
45         tip.style.top = (elPos.y - content.offsetHeight - 10) + 'px';
46         tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
47 
48         switch (posi){
49             case "top":{
50                 tip.style.top = (elPos.y - content.offsetHeight - 7) + 'px';
51                 tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
52             }
53                 break;
54             case "bottom":{
55                 tip.style.top = (elPos.y + el.offsetHeight) + 'px';
56                 tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
57             }
58                 break;
59             case "left":{
60                 tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
61                 tip.style.left = (elPos.x - content.offsetWidth - 7) + 'px';
62             }
63                 break;
64             case "right":{
65                 tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
66                 tip.style.left = (elPos.x + el.offsetWidth) + 'px';
67             }
68                 break;
69         }
70 
71         tip.addEventListener("mouseenter",function(){
72             tip.setAttribute("in","true");
73         });
74         tip.addEventListener("mouseleave",function(){
75             tip.setAttribute("in","false");
76             self.hide();
77         });
78 
79         this.tip = tip;
80     }
81 
82     hide(){
83         if(this.tip && this.tip.getAttribute("in") != "true"){
84             document.body.removeChild(this.tip);
85             this.tip = null;
86         }
87     }
88 
89     getElementPos(el) {
90         let _x = 0, _y = 0;
91         do {
92             _x += el.offsetLeft;
93             _y += el.offsetTop;
94         } while (el = el.offsetParent);
95         return { x: _x, y: _y };
96     }
97 }

ts版

按照一般指令使用即可，使用方法小莫就不在赘述了：

 1 <div tooltip="this is a tool tip." posi = "bottom">
 2     hover me
 3 </div>
 4 <div tooltip="this is a tool tip2." posi = "left">
 5     hover me2
 6 </div>
 7 <div tooltip="this is a tool tip3." posi = "right">
 8     hover me3
 9 </div>
10 <div tooltip="this is a tool tip4." posi = "top">
11     hover me4
12 </div>

只关注结果的童鞋可以直接右拐直行了，下面都是代码分析啦！

代码分析

css没什么可说的，只是一些小技巧，给箭头元素添加一个背景色为白的:after元素，再控制一下位置，就能将箭头的边框画出来了，除此之外大家想必都很熟悉了，我们还是着重说js。

1 function getElementPos(el) {
2     let _x = 0, _y = 0;
3     do {
4         _x += el.offsetLeft;
5         _y += el.offsetTop;
6     } while (el = el.offsetParent);
7     return { x: _x, y: _y };
8 }

这个方法用于获取目标元素左上角相对于窗体的坐标，由于offsetLeft和offsetTop只能用于获取元素相对于父元素的位置，所以需要循环获取父元素的坐标直至根元素。

我们先从初始化说起，给目标元素添加over和leave事件：

1             obj.init = function(el){
2                 el.onmouseenter = function(){obj.showTip(this, this.getAttribute('tipContent'))};
3                 el.onmouseleave = function(){
4                     setTimeout(function(){
5                         obj.hideTip();
6                     },0);
7 
8                 };
9             };

这里提一句，动态给元素添加事件的方法基本有三个，感兴趣的小盆友请猛戳这里：点我点我点我。添加setTimeout是为了将这段代码放到后面执行，也就是说需要在给tip元素的in属性赋值后执行，否则会先执行hide方法再给tip元素的in属性赋值（那么这个赋值就没有任何意义了，因为我们在隐藏tip的时候要判断tip元素的in属性是否为true）。

然后是重头戏tip的显示。

 1 obj.showTip = function(el,html){
 2                 //如果当前目标元素的tip已经显示，返回，避免重复生成tip元素。
 3                 if(obj.tip){
 4                     return;
 5                 }
 6                 //获取目标元素坐标
 7                 var elPos = getElementPos(el);
 8                 //获取tip弹出位置
 9                 var posi = el.getAttribute('posi')?el.getAttribute('posi'):"top";
10 
11                 //创建tip元素
12                 var tip = document.createElement("div");
13                 tip.className = 'tooltip';
14                 //创建箭头元素
15                 var arrow = document.createElement("div");
16                 arrow.className = 'tip-arrow '+posi;
17                 //创建内容元素
18                 var content = document.createElement("div");
19                 content.className = 'tip-content '+posi;
20                 //给tip元素添加箭头元素和内容元素
21                 tip.appendChild(content);
22                 tip.appendChild(arrow);
23                 content.innerHTML = html;
24                 //将tip元素添加到body，必须先将元素添加到body，后面的代码才会生效
25                 document.body.appendChild(tip);
26                 //根据不同弹出位置确定tip的坐标
27                 switch (posi){
28                     case "top":{
29                         tip.style.top = (elPos.y - content.offsetHeight - 7) + 'px';
30                         tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
31                     }
32                         break;
33                     case "bottom":{
34                         tip.style.top = (elPos.y + el.offsetHeight) + 'px';
35                         tip.style.left = (elPos.x + el.offsetWidth/2 - content.offsetWidth/2) + 'px';
36                     }
37                         break;
38                     case "left":{
39                         tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
40                         tip.style.left = (elPos.x - content.offsetWidth - 7) + 'px';
41                     }
42                         break;
43                     case "right":{
44                         tip.style.top = (elPos.y + el.offsetHeight/2 - content.offsetHeight/2) + 'px';
45                         tip.style.left = (elPos.x + el.offsetWidth) + 'px';
46                     }
47                         break;
48                 }
49 
50                 //当鼠标进入tip区域，将属性in设置为true
51                 tip.addEventListener("mouseenter",function(){
52                     tip.setAttribute("in",true);
53                 });
54                 //当鼠标离开tip区域，将属性in设置为false，同时隐藏tip
55                 tip.addEventListener("mouseleave",function(){
56                     tip.setAttribute("in",false);
57                     obj.hideTip();
58                 });
59 
60                 //将tip元素赋值给obj，以判断当前目标元素是否已经拥有tip元素，同时在hide的时候判断当前需要移出的是哪个tip元素
61                 obj.tip = tip;
62             };

隐藏tip就相对简单多啦：

1             obj.hideTip = function () {
2                 //判断当前目标元素的tip元素的in属性，也就是判断鼠标是否在tip区域内
3                 if(this.tip && this.tip.getAttribute("in") != "true"){
4                     document.body.removeChild(this.tip);
5                     //将当前目标元素的tip元素置为null
6                     obj.tip = null;
7                 }
8             };

组件写完啦，下面看看怎么使用它：

1     //遍历所有tooltip的目标元素，然后初始化
2     var conArr = document.getElementsByName("tip");
3     if(conArr) {
4         for (var i = 0; i < conArr.length; i++) {
5             var tip = new ToolTip();
6             tip.init(conArr[i]);
7         }
8     }

本来小莫并没有每一个目标元素对应一个tip元素，但后来发现当目标元素都聚集在一起的时候（比方说表格）会出现tip闪烁或者不显示的bug，究其原因是多个目标元素共用一个tip，而hide方法放到了setTimeout中，导致下一个tip元素刚生成就被hide了，所以要求每一个目标元素对应一个tip元素。

大功告成！

总结

虽然是小莫原生js封装组件的处女座，但仿佛没有什么可总结的，但这个环节必须要有！ok，多谢能坚持到最后的各位同僚！小莫拜谢！

posted on 2017-04-14 15:30 莫冰汐澈阅读(2919) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

离离莫上

小莫的成神之旅（一）原生js封装组件tooltip

导航

公告