原生JS TitleTip

Posted on Edited on In

** 自用笔记：**本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

原生JS TitleTip

为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。

方案一：

Demo

1
<a href="#" class="TitleTip" title="BI Scp" >A标签TitleTip</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<script type="text/javascript">
	var Common = {
		getItself: function(id) {
			return "string" == typeof id ? document.getElementById(id) : id;
		},
		getTextSize: function(text) {
			var span = document.createElement("span");
			var result = {};
			result.width = span.offsetWidth;
			result.height = span.offsetWidth;
			span.style.visibility = "hidden";
			document.body.appendChild(span);
			if (typeof span.textContent != "undefined") span.textContent = text;
			else span.innerText = text;
			result.width = span.offsetWidth - result.width;
			result.height = span.offsetHeight - result.height;
			span.parentNode.removeChild(span);
			return result;
		}
	}
	var TitleTip = {
		showTitleTip: function(param, linkObj, e) {
			var div;
			if (document.getElementById("TitleTipDiv")) {
				document.body.removeChild(document.getElementById("TitleTipDiv"));
			}
			div = document.createElement("div");
			div.id = "TitleTipDiv";
			// div.style.cssText = "text-align: center; color: #fff; background: rgba(0,0,0,.8); position: absolute; z-index: 100; padding: 5px 15px; font-size: 12px; line-height: 20px; transform: translate(-50%); border-radius: 6px;";
			div.innerHTML = linkObj.tip;
			document.body.appendChild(div);

			if (param && param.width) { //如未设置，默认一行显示
				if (Common.getTextSize(div.innerHTML).width < param.width) {
					div.style.maxWidth = param.width + "px";
				} else {
					div.style.width = param.width + "px";
				}
			}

			//must before set opr to get offsetHeight...
			div.style.display = ""; 

			///set TitleTip position
			// console.log("a W"+linkObj.offsetWidth);
			// console.log("a H"+linkObj.offsetHeight);
			// console.log("a X"+linkObj.offsetTop);
			// console.log("a Y"+linkObj.offsetLeft);
			// console.log("Tip W"+div.offsetWidth);
			// console.log("Tip H"+div.offsetHeight);

			div.style.top = linkObj.offsetTop + linkObj.offsetHeight + 8 + "px";
			div.style.left = linkObj.offsetLeft + linkObj.offsetWidth/2 + "px";

			///hide TitleTip after some time
			if (param && param.time) {
				setTimeout(this.hidTitleTip, param.time);
			}
		},
		hidTitleTip: function() {
			if (document.getElementById("TitleTipDiv")) {
				document.getElementById("TitleTipDiv").style.display = "none";
			}
		},
		addTips: function(param) {
			var linkArr = document.getElementsByTagName("a");
			if (!linkArr) {
				return false;
			}
			for (i = 0; i < linkArr.length; i++) {
				if (linkArr[i].className == "TitleTip") {
					linkArr[i].tip = linkArr[i].title;
					var tipObj = this;
					linkArr[i].onmouseover = function(e) {
						tipObj.showTitleTip(param, this, e);
					}
					linkArr[i].onmouseout = tipObj.hidTitleTip;
					if (param && param.moveable == true) { //默认不滚动
						linkArr[i].onmousemove = function(e) {
							tipObj.showTitleTip(param, this, e);
						}
					}
					linkArr[i].title = "";
				}
			}
		}
	}
	window.onload = function() {
		TitleTip.addTips({
			width: 200
		}); 
		// time:5000, moveable: true 
	}
</script>