javascript - 鼠标离开时工具提示文本突然添加到阿拉伯文本中

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

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

这是 fiddle :http://jsfiddle.net/610bx4k1/

编辑

这里是我之前做过的不准确的工具提示示例。它只在 div 下方显示工具提示:

这个例子是我想要的，但是当mouseleave时，tooltip文本添加成阿拉伯文本:

谢谢大家!

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
  });

我还向父 div 添加了这个 CSS，使 Div 宽度等于子内容无论其子项的内容大小如何，工具类型的位置都太多了:

#lool {
    display: inline-block;
}