EasyUI Forum
May 14, 2024, 04:51:25 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to use tooltip in the calendar component?  (Read 3278 times)
officecode
Jr. Member
**
Posts: 69


View Profile Email
« 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!
Logged
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #1 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')
});
}
});
Logged
officecode
Jr. Member
**
Posts: 69


View Profile Email
« Reply #2 on: October 09, 2018, 07:49:54 PM »

Thanks, the effect is very good, and I learned a new event onNavigate.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!