原始页面：
实现效果：当鼠标悬浮在上左按钮时，出现提示信息
实现代码：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
登录后复制
参数说明：
参数 说明 类型 可选值 默认值
effect 默认提供的主题 String dark/light dark
content 显示的内容，也可以通过 slot#content 传入 DOM String — —
placement Tooltip 的出现位置 String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
更多具体内容请参考：Element - The world's most popular Vue UI framework
2.利用display实现提示内容
原始页面：
实现效果：鼠标悬浮时的效果
实现方法：
template中：
按钮为brother1，悬浮内容为brother2
<div class="father">
<div class="brother1"></div>
<div class="brother2">
进行分析
</div>
</div>
登录后复制
style中：
.brother1:hover+div{
display: block
}
.brother2{
display: none
}
登录后复制
该方法要实现鼠标悬浮效果必须两个类为兄弟节点！！！
3.利用@mouseover和@mouseleave实现提示信息
原始页面：
实现页面：除提示信息外，点击按钮会出现相应的窗口
悬浮效果：
点击效果：
实现方法：
template中：
<div
v-for="(item, index) in leftMenu"
:key="index"
@mouseover="hover = item.id"
@mouseleave="hover = -1"
:class="{ 'icon-item': true, 'icon-active': curIndex == item.id }"
@click="clickBtn(item.id)"
>
<div class="btn-msg" v-if="hover == item.id">{{ item.name }}</div>
</div>
登录后复制
data中：
showOne: true,
showTwo: false,
showThree: false,
登录后复制
leftMenu: [
{ name: '图层管理', id: 0 },
{ name: '实时监控', id: 1 },
{ name: '实时气象', id: 2 }
],
hover: -1,
curIndex: 0
登录后复制
methods中：
// 点击事件
clickBtn(index) {
this.reset()
this.curIndex == index ? (this.curIndex = -1) : (this.curIndex = index)
switch (this.curIndex) {
case 0: {
this.methodOne()
break
}
case 1: {
this.methodTwo()
break
}
case 2: {
this.methodThree()
break
}
default: {
break
}
}
},
登录后复制
reset() {
this.showOne = false
this.showTwo = false
this.showThree = false
},
登录后复制
methodOne() {
this.showOne = !this.sshowOne
},
methodTwo() {
this.showTwo = !this.showTwo
},
methodThree() {
this.showThree = !this.showThree
},
登录后复制
style中：
// 提示信息的样式
.btn-msg {
}
登录后复制
// 按钮的样式
.icon-item {
width: 34px
height: 200px
cursor: pointer
margin-bottom: -15px
最简单的做法，给标签增加title属性，并赋上要显示的内容，也就是添加title属性即可。
代码：
<div title="全部内容">部分内容</div>
注：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
扩展资料：HTML的title属性的用法
1、HTML的title属性,当光标移动到该标签时，信息提示框内的内容
</body>
<hr>
<p title="HTML的标签真多啊!">属性选择器</p>
</body>
2、设置标签样式时指定 属性css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--页面内容关键字-->
<meta name="keywords" content="页面内容关键字">
<title>css:是层叠样式表</title>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css1.css">
<style type="text/css">
/*有tittle属性*/
[title] {
color: darkmagenta
}
/*指定tittle属性值*/
[title=t] {
color: red
}
</style>
</head>
<body>
<hr>
<p title="HTML的标签真多啊!">属性选择器</p>
<hr>
<p title="t">属性选择器指定属性值</p>
</body>
</html>
参考资料来源：HTML-百度百科//在鼠标显示一个层，该层的内容为div1的内容function showTip(e,content,ifhave){
//if(!e) e = window.event
//alert(e)
if(ifhave==null || ifhave=='0')return
//var div1 = document.getElementById('divdisplay')//将要d出的层
//div1.innerHTML="备注："+content
var div1 = document.getElementById(content)//将要d出的层
var x,x1
var y,y1
if(window.event){
e = window.event
x=(e.clientX+document.body.scrollLeft+10)//鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
y=(e.clientY+document.body.scrollTop+6)
//if((x+400)>document.body.clientWidth){x=x-400}
if((y+150)>document.body.clientHeight){y=y-150-6}
}else{
x=(e.pageX+10)//鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
y=(e.pageY+6)
//if((x+400)>document.body.clientWidth){x=x-400}
if((y+150)>document.body.clientHeight){y=y-150-6}
}
div1.style.left=x+"px"//鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
div1.style.top=y+"px"
div1.style.display="block"//div1初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div1.style.position="absolute"//必须指定这个属性，否则div1层无法跟着鼠标动
}
//关闭层div1的显示
function closeTip(event,divid)
{
//var div1 = document.getElementById('divdisplay')
//div1.style.display="none"
document.getElementById(divid).style.display="none"
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）