jquery 动态提示答案

【问题标题】：jquery dynamic tooltipjquery 动态提示
【发布时间】：2009-09-25 14:40:01
【问题描述】：

我希望能够从“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>

这样，编辑（真实文本）不隐藏在标题属性中将非常容易

所以，我需要添加可见性：隐藏到 css 类 tohide
获取类为.tohite的div的全部内容，放到之前的div标题中

我的 jquery 代码我已经完成了但不工作......应该是什么正确的方法来做到这一点

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

类似的东西还不行：

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

【问题讨论】：

标签： jquery tooltip

【解决方案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',
   })
}

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

【讨论】：

【解决方案2】：

实际上，您可以将原始 HTML 放入标题字段。只要您将 HTML 中的所有引号替换为 &quot; 或使用单引号（如下所示）。

我过去曾使用this tooltip 来做到这一点。标题包含显示的工具提示数据。并且该脚本一直是modified here，当它在标题中找到一个标志时，它会从分配的 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>

【讨论】：