Dynamic HTML ToolTip Created Nov 11, 2009

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!

I noticed that if you have other images on the page that do not have a name property, that seems to break nearby tooltips. Any idea how to fix this?

In case anyone else encounters this, I found a solution. What I did was use ID instead of image.

HTML

<img src="eye.png" id="tooltip1">
<div class='tooltip' id="tt_tooltip1">Your HTML goes here</div>  

Javascript

$(document).ready(function() {

	$(".scrollable").scrollable({
		clickable:false
	});
	$("img").each(function(){   
		var el = $(this);   
		el.tooltip({      
			position : 'top center',
			tip : '##tt_'+el.attr('id')   
		});   
	});
	
}) 
 

@tnoetzel that worked
thanks a lot

Good solution!

Is this solution work in firefox mozila. i guess no.