通过为元素给el-tag顶部添加hover鼠标悬停文字

作者:admin 发布日期:2023年8月10日 11:17 浏览量:131

要在 Element UI 的 el-tag 元素上添加鼠标悬停时显示的文字,你可以使用 CSS 伪元素 ::before 来实现。这个伪元素可以在元素上方创建一个自定义的提示框,鼠标悬停在元素上时会显示这个提示。

以下是一个示例,展示了如何为 el-tag 元素添加悬停提示文字:

<template>
          <div>
            <el-tag class="custom-tag">标签1</el-tag>
            <el-tag class="custom-tag">标签2</el-tag>
            <el-tag class="custom-tag">标签3</el-tag>
          </div>
        </template>
        <style>
        .custom-tag {
          position: relative;
        }
        .custom-tag:hover::before {
          content: "悬停时显示的文字";
          position: absolute;
          top: -30px; /* 调整提示框的垂直位置 */
          left: 50%;
          transform: translateX(-50%);
          background-color: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 5px;
          border-radius: 4px;
          white-space: nowrap;
        }
        </style>
        

 

在这个示例中,我们为 el-tag 元素添加了一个自定义的类 custom-tag,然后使用 ::before 伪元素为每个元素创建一个提示框。当鼠标悬停在元素上时,提示框会显示指定的文字。

你可以根据需求修改 top 值来调整提示框的垂直位置,以及其他样式属性来自定义提示框的外观。请注意,这种方法并不是 Element UI 原生提供的功能,可能会因为 Element UI 的样式或组件结构而产生一些样式上的不匹配。如果需要更复杂的提示功能,你可能需要使用 Element UI 的 Tooltip 组件,它提供了更灵活的提示功能。

 

无上一篇