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的方式，自我感受，是很是笨重的，此處，如有更好的提議，歡迎留言。
最後，附一張 實現效果圖