Forum user: ambush

Good solution!

Ah I see! Well then I think we are in the same line of interest :) I will have a look at this later and post whatever I can find out. I'm thinking about somtehing calling the div and changing the text before the tooltip is beeing called. That way you will only have to specify the div once.

I'm not sure if this is what you are looking for, but it will take care of your problem having the code in the title tag. Have a look!

http://flowplayer.org/tools/forum/30/31062

Hi there! I had the same issue until i scouted around for a while. This is what I came up with:

HTML

<div class='tooltip' id="tooltip1">Your HTML goes here</div> 
<div class='tooltip' id="tooltip2">Your HTML #2 goes here </div> 

<div class="scrollable">     
    <div class="items">  
        <img src="images/1.jpg" name='tooltip1'/>
        <img src="images/2.jpg" name='tooltip2'/> 
    </div> 
</div> 

JS

$(function(){
	    $("div.items img").each(function(){  
	        var el = $(this);  
	        el.tooltip({  
	            position: 'bottom center',  
	            offset : [0, 0],    
	            tip : '#'+el.attr('name')  
	        });  
	    });
})

CSS

.tooltip { 
    display:none; 
    background:transparent url(dropdown.png); 
    font-size:12px; 
    height:165px; 
    width:268px; 
    color:#000;   
    padding: 20px;  
}

I will not post the code for the scrollable. I think you have that under control.

A warning finger must be pointed as well! You can't use the title attribute in the image as a selector (<img src="1.jpg" title='tooltip1'>). That seems to print out the title in the tooltip instead of the html inside your div. Instead use the name selector.

I hope you will find this useful but if there is something you would like me to explain feel free to ask. I don't know if this is a very good way of doing this but I'll use it until someone will post something faster, easier and better :-)

Cheers!