vue 使用html自带title属性 鼠标悬浮展示内容 修改其样式

公共样式 css-common-common.css文件下

.listboxs {   // 最外层容器 用来包裹需要展示 title 属性的
  .title[data-title] {  // data-title 在我们需要加title属性的标签内 换成 data-title='张三'
    position: relative;

    // 样式：
    &:hover:after { 
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
    }
    // 具体控制title背景的样式 位置 字体等
    &:after {
      content: attr(data-title);
      background-color: rgba(80, 79, 79, 0.8);
      color: #fff;
      font-size: 13px;
      position: absolute;
      padding: 4px 10px;
      left: 20px;
      bottom: -1.5em;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
      z-index: 99999;
      visibility: hidden;
      opacity: 0;
    }
  }
}

页面当中