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());});
所以,你基本上想要将原始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',
})
}
这应该工作,即使没有任何插件。
实际上,您可以将原始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>
啊,妈的,大的答案,我不希望taht多...我会重新考虑的,而事情......,让你知道,如果它!工作! – menardmam 2009-09-25 16:38:20