tooltip在table中实现，鼠标进入tooltip时保持hover效果

近期项目要求实现个这么个功能，鼠标放上，显示提示文字信息。

第一反应肯定是去element-ui啊，demo很友好，很快就实现了。但不对啊，我是在table中使用，table的每一行tr都有hover效果的，鼠标放在tooltip区域内，hover效果就消失了。
这个问题，也不是大问题，但感觉别扭。

网上搜了一下，没有类似问题。
正好自己有点时间，那就自己来！

element-ui上，api上有参照链接:https://popper.js.org/tooltip...。

下面步骤就是详解，嵌入项目步骤。实现过程比较粗糙，如有更好方法，欢迎留言。
1.去gitHub上安装
https://github.com/FezVrasta/...
我是vue项目，所以我采用这个命令 npm install tooltip.js --save

2.引入
import Tooltip from 'tooltip.js'

3.封装组件
<template>
<div class="myHoverTooltip">

<div :id="id">
<slot></slot>
</div>
<div :id="infoId" class="myHoverTooltip-content">
  <slot name="content">

  </slot>
</div>

</div>
</template>

import Tooltip from 'tooltip.js'
export default {

props: {
  id: '',
  infoId: '',
  placement: {
    type: String,
    default: 'top'
  },
},
data() {
  return {
  }
},
mounted () {
  this.render()
},
methods: {
  render () {
    let reference = document.getElementById(this.id).childNodes[0]
    let info = document.getElementById(this.infoId).innerHTML
    new Tooltip(reference, {
      placement: this.placement, // or bottom, left, right, and variations
      html: true,
      title: info
    });
  }
}

}

4.使用方法
<myToolHover :id="'myButton2'+index" :infoId="'myInfo2'+index">

             <i class="iconfont iconshuaxin"></i>
            <div slot="content">
               重新监测
             </div>
          </myToolHover>
          
          
          

说明： 为了获取reference元素和显示内容，我采用了传入id的方式，自我感觉，是非常笨重的，此处，若有更好的提议，欢迎留言。
最后，附一张 实现效果图