Vue2 +elementui hover hints are split into external and internal, internal using el-tooltip and external using mouseover and mouseOut to make the hints hidden (both events are throttled, events are destroyed in beforeDestroy)

<template> <div class="hello"> <! -- <el-tooltip placement="top"> --> <! -- <div slot="content"> 1<br /> 2</div> --> <ol class="list-wrap" @mouseover.stop="mouseover" @mouseout.stop="mouseout"> <li v-for="site in sites" :key="site.id"> <el-tooltip placement="top"> <div Slot = "content" > more information line the information < br / > < / div > < span > span < / span > < / el - tooltip > < / li > < / ol > < div v - if = "isShow" > ol message < / div > <! -- </el-tooltip> --> </div> </template> <script> export default { name: 'HelloWorld', data () { return { isShow: false, sites: [ { id: 'sfdsfsd', name: 'Runoob' }, { id: 'sfdsfdfdsd', name: 'Google' }, { id: 'sfdssdffsd', name: 'Taobao' } ], msg: 'Welcome to Your Vue.js App' } }, methods: { mouseover (e) { if (e.target.tagName === 'OL') { this.isShow = true console.log('enter', e.target.tagName) } }, mouseout (e) { if (e.target.tagName === 'OL') { console.log('leave', e.target.tagName) this.isShow = false } } } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .list-wrap{ background-color: #42b983; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>Copy the code

The display effect is as follows:

Hover outside:

Hover inside span:

Extension: If it is A simple hover prompt text (single or multiple lines), you can use ::hover pseudo-elements, but if you want to use an ATTRIBUTE value in HTML as the prompt value, adding \A cannot wrap A line