jquery.newtooltip2.js

Normal

Javascript

$(document).ready(function(){
    
    $('div#TARGET *').tooltip_setup({in_json:true});
    
});
        

HTML

<img src='./img/test.png' alt='test1' title='{text:"test1"}'>
		

Disable pointer tracking

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true});
	
});
		

HTML

<img src='./img/test.png' alt='test2' title='{text:"test2", track:false, top:0}'>
		

No fade

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true});
	
});
		

HTML

<img src='./img/test.png' alt='test3' title='{text:"test3", fade:false}'>
		

Slow fade

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true});
	
});
		

HTML

<img src='./img/test.png' alt='test4' title='{text:"test4", fade:500}'>
		

Click!

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true});
	
});
		

HTML

<img src='./img/test.png' alt='test5' title='{text:"test5", handler_on :"click"}'>
		

Different Style

CSS

#TOOLTIP2 {
    position        : absolute;
    z-index         : 3000;
    padding         : 5px;
    width           : 30em;
    padding         : 30px;
    font-size       : 12px;
    font-family     : monospace, Courier New, "Osaka－等幅";
    border          : 1px solid #558;
    background      : #a9a;
    opacity         : 0.95;
    color           :#f22;
}
		

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true, auto_css:false});
	
});
		

HTML

<img src='./img/test.png' alt='test6' title='{text:"test6", id:"TOOLTIP_EXAMPLE2"}'>
		

Get by Ajax

Javascript

$(document).ready(function(){
	
	$('div#TARGET *').tooltip_setup({in_json:true, auto_css:false});
	
});
		

HTML

<img src='./img/test.png' alt='test7' title='{url:"./ajax1.html"}'>
		

Complicated Example

Javascript

$('div#TARGET *').tooltip_setup({in_json:true, auto_css:false});

$('.TOOLTIP_EXAMPLE3_TARGET').each(function() {
	
	$(this).bind('click', function(){
		
		$(this).tooltip_open({
			in_json : false,
			id      : 'TOOLTIP',
			text    : 'Click to Close',
			track   : false
		});
		
		$('#TOOLTIP').bind('click', function(){
			
			$(this).fadeOut();
		});
	});
});
		

HTML

<div class='TOOLTIP_EXAMPLE3_TARGET'>
	Click Here
</div>