As the title, thank you!
How should I modify the style to avoid this problem?

Thanks, the effect is very good, and I learned a new event onNavigate.

Code:

$('#c').calendar({
	width:300,
	height:250,
	formatter: function (date) {
		var d = date.getDate();
		if (d == 1){
			var tt = "<img src='ep.jpg'>";
			return '<div class="icon-search md easyui-tooltip" title="'+ tt +'">' + d + '</div>';
		}
		return d;
	}
});

The display is normal when the calendar is first opened. However, once you change to another month, the tooltip will not work.
Please help, thank you!

Hi, everybody. First of all, thanks for Jarry's help, and now I have another question: why aren't the events in tooltip executed? I guess this may have been caused by the blur incident, but I don't know how to solve it:

Code:

<a class="tt">aa</a>
<a class="tt">bb</a>
<script>
	$(function () {
		$('.tt').each(function(){
			$(this).tooltip({
				hideEvent: 'none',
				content: $('<div></div>'),
				onUpdate:function(content){
					var str = $(this).text();
					content.panel({
						title:'panel',
						iconCls:'icon-tip',
						width: 100,
						height:100,
						content: '<a href="javascript:;" onclick="alert(\''+str+'\')">'+str+'</a>',
					});
				},
				onShow:function(e){
					var opts = $(this).tooltip('options');
					$(opts.content).panel('resize');
					var t = $(this);
					t.tooltip('tip').focus().blur(function(){
						t.tooltip('hide');
					});
				}
			});
		})
	})
</script>

The problem has been solved. Thank you very much!

Please look at this example http://code.reloado.com/inodal/edit#javascript,html,live

Appreciated your great help,Dear ...I find the root cause that the property should be "content: $('<div></div>'),"
But I'm confused still that,tooltip can't be displayed from the second row of datagrid..

Code:

	<table id="dd"></table>
	<script>
		$(function(){
			$('#dd').datagrid({
				title:'datagrid',
				width:300,
				data:[
					{id:1,name:'abc1',age:28},
					{id:2,name:'abc2',age:28},
					{id:3,name:'abc3',age:28},
					{id:4,name:'abc4',age:28},
					{id:5,name:'abc5',age:28},
				],
				columns:[[
					{field:'id',title:'id'},
					{field:'name',title:'name',formatter:function(val,row){
						return '<a class="con" href="javascript:void(0)">'+val+'</a>';
					}},
					{field:'age',title:'age'}
				]],
				onLoadSuccess:function(){
					$('.con').tooltip({
						content: $('<div></div>'),
						onUpdate: function(content){
							content.datalist({
								title:'datalist',
								iconCls:'icon-tip',
								width: 278,
								height:120,
								lines:true,
								data:[
									{title:'aaa'}
								],
								textField:'title'
							});
						},
						onShow: function(){
							var opts = $(this).tooltip('options');
							$(opts.content).datalist('resize');
						}
					});
				}
			});
		});
	</script>

Thanks for your reply.
After adding the onShow event, datalist still does not display the data.

You should resize the datalist after display the tooltip dialog.

Code:

onUpdate: function(content){
	content.datalist({
		title:'datalist',
		iconCls:'icon-tip',
		width: 278,
		height:120,
		lines:true,
		data:[
			{title:'aaa'}
		],
		textField:'title'
	});
},
onShow: function(){
	var opts = $(this).tooltip('options');
	$(opts.content).datalist('resize');
}

After testing, if I change the URL attribute in datalist, the data can be obtained, but cannot be displayed in the datalist.
Does tooltip not support this type of writing? Is there anything else that can be used to display DataGrid data in tooltip?
This problem has been bothering me for a long time.

The data in the following code cannot be displayed. Ask for help. Thanks！

Code:

onLoadSuccess:function(data){
	$('.img').tooltip({
		content: function(){return $('<div></div>')},
		position: 'right',
		onUpdate:function(content){
			content.datalist({
				title:'datalist',
				iconCls:'icon-tip',
				width: 278,
				height:120,
				lines:true,
				data:[
					{title:'aaa'}
				],
				textField:'title'
			});
		}
	});
},