当mouseleave时，工具提示文本突然添加到阿拉伯语文本中

Question

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

HTML：

<div align="right">
     <span class="enter">ﻣِـنْ أَﺧِﯿﻪِ</span>
</div>

使用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');
});

这项工作就像魅力一样，但我不知道为什么工具提示文本会不断添加到阿拉伯语文本中。谢谢。

这里是小提琴：http://jsfiddle.net/610bx4k1/

修改

这里是我之前做过的不准确工具提示的例子。它只显示div下面的工具提示：

这个例子是我想要的，但是当mouseleave时，工具提示文本被添加到阿拉伯语文本中：

谢谢大家！

Answer 1

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

<强> LIVE DEMO

$( "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
  });

我也将这个CSS添加到父div中，使Div宽度等于子内容 工具类型的位置，无论其子项的内容大小如何：

#lool {
    display: inline-block;
}