jquery动态工具提示

我喜欢能够从文件“a la ajax”风格加载工具提示....但首先我想看看我是否能够将html文本“转移”到标题属性jquery动态工具提示

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

这样，这将是超级容易编辑（真正的文本）不隐藏到title属性

所以，我需要添加能见度：隐藏的CSS类tohide
获得股利带班.tohite和PU它以前的DIV标题的全部内容

我的jQuery代码我这样做但不工作...什么应该是这样做的正确方法

总之，对于每个div与类.odeur获取下一个（孩子？）隐藏的内容，并把它放在属性title =''

类似的东西还没有工作：

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

来源

2009-09-25 menardmam

所以，你基本上想要将原始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', 
    }) 
}

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

来源

2009-09-25 15:46:50 Mike

啊，妈的，大的答案，我不希望taht多...我会重新考虑的，而事情......，让你知道，如果它！工作！ – menardmam 2009-09-25 16:38:20

实际上，您可以将原始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>

来源

2009-09-27 11:52:42 Mottie

jquery动态工具提示

回答

相关问题