I'm trying to use some some HTML for the 'title' of a image instead of text. So instead of:
<img src="your/url/here.jpg" title="some description" />

I want to use something like:
<img src="your/url/here.jpg" title="<div>some code</div>" />

I didn't think this was possible until I noticed it used on another site. But I can't seem to make it work. Here's the code from the site:

<a title="<div style='float:left;'><img src='/anime/images/thumbnail/331.jpg' /></div><div id='entry_tag_container'>
<div style='margin-left:5px;' id='entry_information'></div>
<ul id='entry_information_content'>
<li>
<ul>
<li id='entry_tag'></li>
<li id='entry_tag_content'>
<p> sci-fi aliens pirates space action harem gods </p>
</li>
</ul>
</li>
<li>
<ul>
<li id='entry_noe'></li>
<li class='entry_information_content'>
<p> 0 </p>
</li>
</ul>
</li>
<li>
<ul>
<li id='entry_length'></li>
<li class='entry_information_content'>
<p>
30 Minutes / Half Hour </p>
</li>
</ul>
</li>
<li>
<ul>
<li id='entry_yp'></li>
<li class='entry_information_content'>
<p>
1995 </p>
</li>
</ul>
</li>
</ul></div>
" class="list_title_middle" href="/anime?id=331">Tenchi Universe</a>


The result is very cool. This example is for the title of a link, however, my guess is it will work exactly the same with the title of an image.

Here's the site that came from if you want to see an example of what I'm trying to accomplish:
http://romanceanime.com/anime/

Thanks in advance for any help.

You should not do this, because it is invalid according to W3C standards

:)

however, my guess is it will work exactly the same with the title of an image.
No! It's a javascript+CSS based tooltip. Of course the content of the tootip is placed in the attribute title Check http://www.google.com/search?q=jquery+tooltips

You should not do this, because it is invalid according to W3C standards

:)
I was unaware of that, thanks for the info. Do you know of a different way to accomplish a similar result?

You should not do this, because it is invalid according to W3C standards

:)
Nothing wrong with that, since we can have any string inside the attribute title. Though we can't expect it to be rendered as a normal HTML, without any javascript.

Hi there

the site uses jquery.tooltip.js to achieve that effect. ;)

coothead

No! It's a javascript+CSS based tooltip. Of course the content of the tootip is placed in the attribute title Check http://www.google.com/search?q=jquery+tooltips

Thank you very much for the info. I've been searching through some of the sites, but it's all a bit confusing to me. Would you mind posting an example of what I'd need to do?

*Edit*
From what I can tell, I need to include the library in my header
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>

Then I'd define .tooltip in my css.
/* tooltip styling. by default the element to be styled is .tooltip */
.tooltip {
display:none;
background:transparent url(/tools/img/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}


Then use a line like
$("#demo img[title]").tooltip();

And what that would do is replace the title attribute of any image that is within a <div> with the id 'demo'? But how do I add content to this?

Nothing wrong with that, since we can have any string inside the attribute title. Though we can't expect it to be rendered as a normal HTML, without any javascript.


I agree we can have any string inside attr title, but we cannot use HTML tags inside it

:)

Just finished applying this to my site. It works great! Thanks to everyone who helped. Here's the site where I got the info I needed:
http://flowplayer.org/tools/demos/tooltip/any-html.html

This is the webpage where I'm making use of it. But please note, this site is still under heavy construction.
http://techinno.zxq.net/games.php