jQuery动态工具提示 [英] jquery dynamic tooltip

问题描述

我希望能够从文件"la ajax"样式中加载工具提示....但是首先，我想看看是否能够将html文本传输"到title属性

I like to be able to load a tooltip from a file "a la ajax" style.... but first i like to see if i am able to "transfert" html text to the title attribute

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

i use jquery and tooltip (from 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>

那样，超级容易地编辑(真实文本)而不隐藏在标题属性中

that way, it will be super easy to edit (real text) not hidden into title attribute

1. 所以，我需要添加可见性:隐藏在css类中以隐藏
2. 使用.tohite类获取div的全部内容，并将其放在上一个div标题中

我已经完成的我的jquery代码无法正常工作...正确的方法是什么

my jquery code i have done yet dont work... what should be the correct way to do that

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

in short, for each div with class .odeur get the content of the next (child?) tohide and put it in the attribute title=''

诸如此类的东西尚不起作用:

something like that dont work yet :

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

推荐答案

因此，您基本上想将原始HTML存储到标题字段中吗?那根本行不通.它将产生不正确比例的HTML错误.

So, you basically want to store raw HTML into the title field? That simply does not work. It would create HTML Errors of unholy proportions.

相反，为什么不将文本存储到标题字段中(但是，只有在必须...具有内容的Javascript对象才更实用[并且您可以将原始HTML存储在其中；)])

Instead, why don't you just store the Text into the title field (but only if you must... a Javascript Object with the contents would be more practicable [AND you can store raw HTML into them ;)])

如果将工具提示文本存储在标题字段中，则无需任何Java脚本即可创建工具提示...浏览器会为您完成此操作.

In case you store the tooltip text into the title field, you won't need any Javascript to create a tooltip... The Browser does that for you.

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

If you do want a custom tooltip, I would suggest creating an empty div that serves as tooltip, and then extract the text it displays from a Javascript Object.

对于实例:
图片的HTML

For Instance:
HTML for the images

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

工具提示的HTML.只要它不是要提示的Element的子元素，它就可以在任何地方

HTML for the tooltip. This can be anywhere as long as it is not a child of an Element it has to tip

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

JavaScript

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

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

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

This should work even without any Plugins.

这篇关于jQuery动态工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！