Текст подсказки внезапно добавлен в арабский текст, когда mouseleave

Question

Я создаю правила Tajweed, которые, когда I mouseenter, заменят выбранный Tajweed цветом и показывают всплывающую подсказку только под цветным арабским текстом. Но проблема в том, что при I mouseleave текст подсказки добавляется в арабский текст.

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/

EDIT

Вот пример не точная подсказка, которую я делал ранее. Это только показать всплывающую подсказку ниже 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; 
}