在具有类的元素上悬停时添加工具提示

如何解决在具有类的元素上悬停时添加工具提示

我想在具有特定类（'提及'）的元素上添加工具提示。在 javascript(VUE JS) 中执行此操作的正确方法是什么。

这是我的元素

<span class="mention" data-index="0" data-denotation-char="@" data-id="5e4e58c31c09280007523ee6" data-value="<a href=&quot;https://web-dev.accura.onl/#/ip/user/5e4e58c31c09280007523ee6/&quot; target=_blank>abhi matta" data-link="https://web-dev.accura.onl/#/ip/user/5e4e58c31c09280007523ee6/">&#xFEFF;<span contenteditable="false"><span class="ql-mention-denotation-char">@</span><a href="https://web-dev.accura.onl/#/ip/user/5e4e58c31c09280007523ee6/" target="_blank">abhi matta</a></span>&#xFEFF;</span>

到目前为止，我已经根据类搜索并挑选了元素并将事件侦听器添加到元素中，但我不确定这是正确的方法。

let mentions = Array.from(document.getElementsByClassName('mention'))
console.log('mentions--->>',mentions)
if (!isEmpty(mentions)) {
    mentions.map(mention => {
        if (mention !== null) mention.addEventListener('mouSEOver',(e) => {
            this.mouSEOver(e)
        })
    })
}