jquery动态工具提示

我希望能够从一个文件中加载工具提示，这是一种ajax风格。。。。但是首先我想看看我是否能够将html文本传输到title属性

我使用jquery和来自的工具提示

这是密码

<div class="odeurbox">
<img src="odeurs/aiguilledepin.jpg" 
width="67" height="67" />
Aiguille de pin </div>

<div class="tohide">
<h3>Agrumes :</h3>
<p>Les agrumes sont les fruits des végétaux des g....</p>
<em>Source : Le Petit Robert 2009</em></div>

---

那么，您基本上想要将原始HTML存储到标题字段中？这根本不起作用。它会产生不正常比例的HTML错误

相反，为什么不将文本存储到标题字段中，但前提是必须。。。一个包含内容的Javascript对象更为实用[您可以将原始HTML存储到其中；]

如果将工具提示文本存储到标题字段中，则不需要任何Javascript来创建工具提示。。。浏览器会帮你完成这项工作

如果您确实需要自定义工具提示，我建议创建一个空div作为工具提示，然后从Javascript对象提取它显示的文本

例如： 用于图像的HTML

<img id="foo" src="http://localhost/foobar.jpg">

然后，使用jQuery

jQuery('img').hover(
   function() {
      var tip = jQuery('#tooltip');
      tip.find('h3').text(my_object[this.id]['title'];
      tip.find('p').text(my_object[this.id]['description'];
      tip.find('em').text(my_object[this.id]['source'];
      tip.show();
   },
   function() {
      jQuery('#tooltip').hide();
   }
).mousemove(function(e) {
   jQuery('#tooltip').css({
      'top': e.PageY + 10 + 'px',
      'left': e.PageX + 10 + 'px',
   })
}

---

即使没有任何插件，这也应该可以工作。

实际上，您可以将原始HTML放入标题字段。只要将HTML中的所有引号替换为或使用单引号，就像我在下面所做的那样

我过去就是这样做的。标题包含显示的工具提示数据。该脚本在标题中找到一个标志时，从指定的ID中提取数据

以下是如何使用此工具提示的示例：

<a class="tooltip" href="http://www.google.com" title="<center><img src='http://www.google.com/logos/11th_birthday.gif'><br>Happy 11th Birthday Google!</center>">Google</a>

var my_object = new Object();
my_object['foo']['title'] = 'The almighty foobar';
my_object['foo']['description'] = 'Spy sappin\' mah Stack!';
my_object['foo']['source'] = 'Guide to the Universe';

jQuery('img').hover(
   function() {
      var tip = jQuery('#tooltip');
      tip.find('h3').text(my_object[this.id]['title'];
      tip.find('p').text(my_object[this.id]['description'];
      tip.find('em').text(my_object[this.id]['source'];
      tip.show();
   },
   function() {
      jQuery('#tooltip').hide();
   }
).mousemove(function(e) {
   jQuery('#tooltip').css({
      'top': e.PageY + 10 + 'px',
      'left': e.PageX + 10 + 'px',
   })
}

<a class="tooltip" href="http://www.google.com" title="<center><img src='http://www.google.com/logos/11th_birthday.gif'><br>Happy 11th Birthday Google!</center>">Google</a>