el-tooltip 自定义背景，气泡里加图片

最近接到一个需求，气泡里有图片，而且气泡自定义样式。
1.  需要对气泡加一个class名字   popper-class="custom-tooltip"
     然后对其设置样式

2.  对el-tooltip 的content插槽进行处理，在其里面加入图片，文字

代码如下：

<template>
    <el-tooltip content='' placement="top" popper-class="custom-tooltip">
        <template #content>
            //气泡中要显示的内容
            <img class="toopTipIn" src="@/assets/images/tooltip_in.png" alt="">
            {{content}}
        </template>
        
        //鼠标停在这个图片上，显示气泡
        <img class="toopTip" src="@/assets/images/tooltip.png" alt="">
    </el-tooltip>
      
</template>
    
<script lang="ts" setup>
   import { defineProps } from 'vue';
   const props = defineProps({
        content:{
            type: String,
            required: true
        },
    });
</script>
<style lang="less">
    .el-popper.custom-tooltip{
      background-color: #fff!important;
      border: 1px solid #09A399!important;
      display: block!important;
      color: #999!important;
      font-size:12px;
      line-height:14px
    }
    .el-popper.custom-tooltip .el-popper__arrow::before{
        background-color: #fff!important;
        border-right: 1px solid #09A399!important;
        border-bottom: 1px solid #09A399!important;
    }
    .toopTip{width:18px;height: 18px;}
    .toopTipIn{width: 14px;height: 14px}
</style>