Javascript 鼠标移动时工具提示文本突然添加到阿拉伯语文本中

我正在创建Tajweed规则，当I鼠标输入时，它将用颜色替换选定的Tajweed，并仅在有颜色的阿拉伯语文本下显示工具提示。但问题是，当I鼠标移动时，工具提示文本被添加到阿拉伯语文本中

HTML:

ﻣِـنْ أَﺧِﯿﻪِ

Javascript:

$( "span.enter" )
.mouseenter(function() {
var $this=$(this);
 $this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,'<ruby id="enter" class="tooltip-danger" style="color:red">'+
 unescape("%u0646%u0652%u0020%u0623%u064E")+'</ruby>'));

    $('#enter').tooltip({
       trigger: 'hover',
       placement: 'bottom',
       html: true,
       title: '<span>Read With Bright & Clear</span>'
});
})

.mouseleave(function() {
var $this=$(this);
 $this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,unescape('%u0646%u0652%u0020%u0623%u064E')));

    $('#enter').tooltip('hide');
});

$（“span.enter”）
.mouseenter（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\u0646\u0652\u0020\u0623\u064E/，“”+
unescape（“%u0646%u0652%u0020%u0623%u064E”）+“”）；
$（'#输入'）。工具提示({
触发器：“悬停”，
位置：'底部'，
是的，
标题：“以明亮清晰的方式阅读”
});
})
.mouseleave（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\u0646\u0652\u0020\u0623\u064E/），unescape（“%u0646%u0652%u0020%u0623%u064E”）；
$（'#enter'）。工具提示（'hide'）；
});

这项工作很有魅力，但我不知道为什么工具提示文本不断添加到阿拉伯语文本中。多谢各位

这是小提琴：

编辑

这里是一个不准确的工具提示示例，我以前做过。它仅在div下方显示工具提示：

此示例是我想要的，但当鼠标移动时，工具提示文本添加到阿拉伯语文本中：

---

谢谢大家

问题在于

工具提示

尝试将工具提示添加到父元素以避免此问题：

$( "span.enter" )
    .mouseenter(function() {
    var $this=$(this);
$this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,'<ruby id="enter" class="tooltip-danger" style="color:red">'+
    unescape("%u0646%u0652%u0020%u0623%u064E")+'</ruby>'));
    $('#lool').tooltip({  // <-- parent element 
    trigger: 'hover',
    placement: 'bottom',
    html: true,
    title: 'Read With Bright & Clear'
  });
  })

  .mouseleave(function() {
    var $this=$(this);
$this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,unescape('%u0646%u0652%u0020%u0623%u064E')));
        $('#lool').tooltip('hide'); // <-- parent element
  });

---

谢谢你的回复。我以前是这样做的，但这并没有出现在彩色文本的下面。它将在div的下方显示工具提示，这意味着，如果有较长的阿拉伯语文本，则在彩色阿拉伯语文本下方的位置将不准确。

$( "span.enter" )
    .mouseenter(function() {
    var $this=$(this);
$this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,'<ruby id="enter" class="tooltip-danger" style="color:red">'+
    unescape("%u0646%u0652%u0020%u0623%u064E")+'</ruby>'));
    $('#lool').tooltip({  // <-- parent element 
    trigger: 'hover',
    placement: 'bottom',
    html: true,
    title: 'Read With Bright & Clear'
  });
  })

  .mouseleave(function() {
    var $this=$(this);
$this.html($this.text().replace(/\u0646\u0652\u0020\u0623\u064E/,unescape('%u0646%u0652%u0020%u0623%u064E')));
        $('#lool').tooltip('hide'); // <-- parent element
  });

#lool {
    display: inline-block;
}