原生JS TitleTip

   自用笔记:本文属于自用笔记,不做详解,仅供参考。在此记录自己已理解并开始遵循的前端代码规范。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>

0%