Question

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

我使用jquery和tooltip（来自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代码我已经完成了但是没有工作......应该是正确的方法

简而言之，对于每个带有类的div .odeur获取下一个（child？）tohide的内容并将其放入属性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',
   })
}

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

Answer 2

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

我过去曾使用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>

jquery动态工具提示

2 个答案: