自定义鼠标经过提示文字

86 阅读1分钟

第一种方式

PixPin_2024-01-12_14-41-16.png

html

 <span id="hoveRoverdue_day">{{ scope.row.warehouse_member }}</span>

css

自定义鼠标经过提示文字

 #hoveRoverdue_day:hover::after {
    content: attr(title);
    position: absolute;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 15%;
    color: #606266;
    width: 50px;
    height: 30px;
    padding: 5px;
    top: 35%;
    left: 70%;
    z-index: 999999 !important;
    transform: translate(-50%, -10px);
  }

第二种方式:

只需要在div上加上title,可以加上v-bind动态显示

PixPin_2024-01-12_14-45-23.png

 <span :title="scope.row.overdue_day">{{ scope.row.warehouse_member }}</span>