jquery dynamic tooltip

Question

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

i use jquery and tooltip (from http://jquery.bassistance.de/tooltip/demo/)

here is the code

<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. so,i need to add visibility : hidden to the css class tohide
2. get the whole content of div with class .tohite and pu it in the previous div title

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

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());});

Answer 1

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.

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 ;)])

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.

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.

For Instance:
HTML for the images

<img id="foo" src="http://localhost/foobar.jpg"&gt;

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

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';

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.

Answer 2

Well actually you can put raw HTML into the title field. As long as you replace all quotes in the HTML with " or use single quotes (like I did below).

I've used this tooltip in the past to do just that. The title contains the tooltip data that is displayed. And that script has been modified here to pull data from an assigned ID when it finds a flag in the title.

Here's an example of how to use this tooltip:

<a class="tooltip" href="http://www.google.com" title="<center><img src='http://www.google.com/logos/11th_birthday.gif'&gt;&lt;br&gt;Happy 11th Birthday Google!</center>">Google</a>