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的方式，自我感觉，是非常笨重的，此处，若有更好的提议，欢迎留言。
最后，附一张 实现效果图