jquery 动态工具提示

Question

我希望能够从“a la ajax”样式的文件加载工具提示......但首先我想看看是否能够将 html 文本“转移”到标题属性

我使用 jquery 和工具提示(来自 http://jquery.bassistance.de/tooltip/demo/ )

这是代码

<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>

这样，编辑(真实文本)就非常容易，而不是隐藏在标题属性中

1. 所以，我需要将 Visibility:hidden 添加到 css 类 tohide
2. 获取 class .tohite 的 div 的全部内容并将其放入前一个 div 标题中

我已经完成的 jquery 代码还不能工作...正确的方法应该是什么

简而言之，对于每个具有 .odeur 类的 div 获取下一个(子？)要隐藏的内容并将其放入属性 title=''

类似的东西还不起作用:

$('div.odeurbox').each(function(){$(this).attr("title", $('.tohide').html());});

Answer 1

那么，您基本上想将原始 HTML 存储到标题字段中吗？那根本行不通。它会产生严重的 HTML 错误。

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

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

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

例如:
图像的 HTML

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

工具提示的 HTML。这可以是任何地方，只要它不是它必须提示的元素的子元素

<div id="tooltip">
   <h3></h3>
   <p></p>
   <em></em>
</div>

JavaScript

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

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

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