title提示框样式

vue里面
鼠标经过title提示框的样式如何自定义

 <i class="iconfont icon-fuzhiicon" title="复制"></i>

默认是这种

img

自己写个框 自定义样式和事件

可以通过给包含title的元素添加CSS样式来自定义鼠标经过title提示框的样式，如下所示：

.iconfont[title]:hover:after {
  content: attr(title);
  background: #333;
  color: #fff;
  padding: 5px;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 9999;
}

这个CSS样式会在鼠标经过包含title属性的.iconfont元素时，添加一个绝对定位的伪元素，用来展示自定义的提示框样式。其中，content属性用来设置提示框的文本内容，background和color属性用来设置提示框的背景色和文本颜色，padding属性用来设置提示框的内边距，position属性用来设置提示框的位置，z-index属性用来设置提示框的层级。

在Vue中，你可以使用CSS样式来自定义title提示框的样式。你可以给你的图标元素添加一个class，然后在CSS中设置该class的:hover伪类样式。例如，假设你的class为"my-icon"，则可以按如下方式设置样式：

.my-icon:hover::before {
  content: attr(title);
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(5px, -50%);
}

这个样式将在鼠标悬停在该元素上时显示一个自定义的提示框。提示框的样式由CSS中的属性控制，例如background-color，color，padding等。你可以根据自己的需要更改这些属性来定制提示框的样式。

给title设置事件，鼠标经过事件或者css里面的hover