【前端】el-tooltip悬浮窗如何自定义提示内容

目录

实现效果

HTML

data

methods

---

         在实际开发过程中，我的前端项目需要实现一个小小的功能，就是当鼠标移动到跳转按钮上的时候显示实际跳转的地址链接。

实现效果

HTML

        在el-tooltip标签里面添加一个div标签，在div标签上使用slot="content"，div里面的内容就是鼠标滑过显示的提示内容。

<el-tooltip effect="white" placement="top">
       <div slot="content">{{formDetail.assetNavigation}}</div>
       <el-button 
            icon="el-icon-search" 
            v-model="formDetail.assetNavigation" 
            :style="{width: '60%'}" 
            class="underline"                        
            @click="jump()">点击跳转
       </el-button>
</el-tooltip>

data

data() {
    return {
        formDetail: {
            assetNavigation: "https://www.baidu.com/"
        }
    }
}

methods

jump() {
      // location.href="https://www.baidu.com/" //当前页面打开
      // window.open(this.form.assetNavigation);//新的页面打开页面  https://www.baidu.com/
      window.open("https://www.baidu.com/");
    },

 保存vue文件后使用浏览器打开，这时候就可以看到鼠标滑过内容显示为自定义的内容了。