在当前项目中，tooltip提示框的功能用的比较多，每次都得重写，这次直接做成指令，下次拿来即用~
效果图：
right
top
bottom
left
使用方法：
content： 提示内容
color：文字颜色
bgColor：背景颜色
pos：提示位置，默认top
<div class="box" v-tooltip="{content: 'top提示', color:'#fff', bgColor: '#ffba00', pos: 'top'}">top提示</div>
<div class="box" v-tooltip="{content: 'right提示', color:'white', bgColor: 'black', pos: 'right'}">right提示</div>
<div class="box" v-tooltip="{content: 'bottom提示', color:'white', bgColor: 'black', pos: 'bottom'}">bottom提示</div>
<div class="box" v-tooltip="{content: 'left提示', color:'white', bgColor: 'black', pos: 'left'}">left提示</div>
使用时，需要注意 box 元素样式不能是 overflow: hidden;，否则不显示
源码：
/**
* content: '回到顶部', 提示文字
* color:'white', 字体颜色
* bgColor: 'black', 背景颜色
* pos: 'left' 位置，默认top
*/
import Vue from "vue";
Vue.directive("tooltip", {
bind(el, binding) {
el.style.position = "relative";
let tip = document.createElement("span");
el.addEventListener("mouseover", function() {
tip.style.display = "block";
});
el.addEventListener("mouseout", function() {
tip.style.display = "none";
});
tip.className = "tooltip";
// 提示框样式
let css = {
display: "none",
position: "absolute",
// width: "100%",
padding: "5px 10px",
borderRadius: "4px",
color: binding.value.color || "white",
backgroundColor: binding.value.bgColor || "black",
lineHeight: 1,
textAlign: 'center',
zIndex: 9999
};
let pos = setPosition(tip, binding.value.pos, binding.value.bgColor);
for (const item in pos) {
css[item] = pos[item];
}
tip.textContent = binding.value.content;
setCss(tip, css);
el.appendChild(tip);
}
});
// 给元素赋值样式
function setCss(obj, css) {
for (const attr in css) {
obj.style[attr] = css[attr];
}
}
// 设置提示框位置样式
function setPosition(tip, pos, color) {
switch (pos) {
case "left":
tip.className += " left";
document.styleSheets[0].insertRule(
`.tooltip.left:before{
content: '';
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-left: 5px solid ${color};
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}`,
0
);
return { left: "0", top: "50%", transform: "translateX(-110%) translateY(-50%)" };
break;
case "right":
tip.className += " right";
document.styleSheets[0].insertRule(
`.tooltip.right:before{
content: '';
position: absolute;
left: -5px;
top: 50%;
transform: translateY(-50%);
border-right: 5px solid ${color};
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}`,
0
);
return { right: "0", top: "50%", transform: "translateX(110%) translateY(-50%)" };
break;
case "bottom":
tip.className += " bottom";
document.styleSheets[0].insertRule(
`.tooltip.bottom:before{
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border-bottom: 5px solid ${color};
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}`,
0
);
return {
bottom: "-5%",
left: "50%",
transform: "translateX(-50%) translateY(130%)"
};
break;
case "top":
tip.className += " top";
document.styleSheets[0].insertRule(
`.tooltip.top:before{
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-top: 5px solid ${color};
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}`,
0
);
return {
top: "-5%",
left: "50%",
transform: "translateX(-50%) translateY(-130%)"
};
break;
//top
default:
tip.className += " top";
document.styleSheets[0].insertRule(
`.tooltip.top:before{
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-bottom: 5px solid ${color};
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}`,
0
);
return {
top: "-5%",
left: "50%",
transform: "translateX(-50%) translateY(-130%)"
};
break;
}
}
还可以做进一步优化：
1、提示文字双向绑定
2、空三角样式
