JQuery UI工具提示：奇怪的CSS图像格式

我通过制作部分文本和工具提示来注释我的博客，当你悬停时，你会看到相关的图像（）。然而，有一个奇怪的问题，那就是： A） 每当您将鼠标悬停在工具提示上时，图像首先会在屏幕外不正确地显示 B） 您悬停的最后一个tooptip将附加到页面底部，以便在页面的左下角有一个随机图像

以下是我的Javascript：

$(document).ready(function(){
  $( document ).tooltip({
    toggle:   'fade',
    content: function(){
    var element = $( this );
    var title = element.attr( 'title' );
      return '<img src="/assets/' + title + '">';
      }
    });
});

---

还有人听说/看到这个问题吗？有没有想过为什么会发生这种情况，或者更好地使用工具提示，这样就不会发生这种情况，或者他们知道的解决方法对我要完成的任务有效？

请创建一堆代码！您可以在这里看到我的小提琴：，但我不确定这会有多大帮助，因为资产加载不正确。如果你将鼠标悬停在这篇文章的任何工具提示上，你可以看到我在说什么。。。

<span class='tooltip' title='twocats.jpg'>"No. I have 2 cats."</span><br> 

.tooltip {
/*color: coral;*/
background-color: #dbe9ff;
/*border-radius: 5px;*/
}

.tooltip:hover {
background-color: #dfdbff;
color: white;

}

.ui-tooltip {
  text-align: center;
  border-radius: 20px;
}