div或button添加鼠标悬浮提示信息的多种方法小结vue

1.利用elementUI组件里的Tooltip 文字提示实现

原始页面：

实现效果：当鼠标悬浮在上左按钮时，出现提示信息

实现代码：

<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;
		}
		.icon-item:nth-child(1) {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
			position: fixed;
			left: 1%;
			top: 11%;
		}
		.icon-item:nth-child(1).icon-active {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
		}
		.icon-item:nth-child(2) {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
			position: fixed;
			left: 1%;
			top: 17%;
		}
		.icon-item:nth-child(2).icon-active {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
		}
		.icon-item:nth-child(3) {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
			position: fixed;
			left: 1%;
			top: 23%;
		}
		.icon-item:nth-child(3).icon-active {
			background-image: url(~@/assets/xxx.png);
			width: 37px;
			height: 37px;
		}