EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: officecode on October 09, 2018, 03:42:26 AM

Title: How to use tooltip in the calendar component？
Post by: officecode on October 09, 2018, 03:42:26 AM

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!

Title: Re: How to use tooltip in the calendar component？
Post by: jarry on October 09, 2018, 06:48:24 PM

Please refer to the code below:

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;
	},
	onNavigate: function(year,month){
		$(this).find('.md').on('mouseenter', function(){
			$(this).tooltip({
				onHide: function(){
					$(this).tooltip('destroy')
				}
			}).tooltip('show')
		});
	}
});

Title: Re: How to use tooltip in the calendar component？
Post by: officecode on October 09, 2018, 07:49:54 PM

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