剑道UI（调度） - 展会介绍工具提示上悬停（jQuery的）

Question

我使用的剑道UI调度...

我怎么能显示jQuery的在悬停工具提示说明？

Online Demo

var _data = new kendo.data.SchedulerDataSource({ 
 
    data: [ { 
 
    eventID: 8, 
 
    title: "Group meeting.", 
 
    start: new Date(), 
 
    end: new Date(), 
 
    pending:false, 
 
    recurrenceRule: "", 
 
    recurrenceException: "", 
 
    description: "Take my brother to his group meeting.", 
 
    isAllDay:false, 
 
    ownTimeSlot:true, 
 
    careAssistantId: 5, 
 
    clientId: 6 
 
    },{ 
 
    eventID: 9, 
 
    title: "Make dinner.", 
 
    start: new Date("2013/06/13 11:00"), 
 
    end: new Date("2013/06/13 13:30"), 
 
    pending:true, 
 
    recurrenceRule: "", 
 
    recurrenceException: "", 
 
    description: "Make dinner for my mom.", 
 
    isAllDay:false, 
 
    ownTimeSlot:true, 
 
    careAssistantId: 5, 
 
    clientId: 6 
 
    } ], 
 
    schema: { 
 
    model : { 
 
     id : "eventID" 
 
    } 
 
    } 
 
}); 
 

 
function save(){ 
 
    console.log(_data);  
 
} 
 

 
$('#scheduler').kendoScheduler({ 
 
    date: new Date(), 
 
    startTime: new Date("2013/6/13 07:00 AM"), 
 
    height: 600, 
 
    views: [ 
 
    { type: "agenda", title: "Agenda" }, 
 
    { type: "month", selected: true }, 
 
    ], 
 

 
    save: save, 
 
    dataSource:_data 
 
    });

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" /> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" /> 
 

 
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script> 
 
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
 
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script> 
 
<div id="scheduler"></div>

是的，他们确实有以下例子，但它是在角JS :(

http://docs.telerik.com/kendo-ui/web/scheduler/how-to/AngularJS/show-tooltip

Answer 1

是啊...

我通过修改下面一样了吧..

<script> 
var _data = new kendo.data.SchedulerDataSource({ 
     data: [ { 
      eventID: 8, 
      title: "Group meeting.", 
      start: new Date(), 
      end: new Date(), 
      pending:false, 
      recurrenceRule: "", 
      recurrenceException: "", 
      description: "Take my brother to his group meeting.", 
      isAllDay:false, 
      ownTimeSlot:true, 
      careAssistantId: 5, 
      clientId: 6 
     },{ 
      eventID: 9, 
      title: "Make dinner.", 
      start: new Date("2013/06/13 11:00"), 
      end: new Date("2013/06/13 13:30"), 
      pending:true, 
      recurrenceRule: "", 
      recurrenceException: "", 
      description: "Make dinner for my mom.", 
      isAllDay:false, 
      ownTimeSlot:true, 
      careAssistantId: 5, 
      clientId: 6 
     } ], 
     schema: { 
      model : { 
      id : "eventID" 
      } 
     } 
     }); 

     function save(){ 
     console.log(_data);  
     } 

     $('#scheduler').kendoScheduler({ 
     date: new Date(), 
     startTime: new Date("2013/6/13 07:00 AM"), 
     height: 600, 
     views: [ 
      { type: "agenda", title: "Agenda" }, 
      { type: "month", selected: true }, 
     ], 

     save: save, 
     dataSource:_data 
     }); 




     $(function() { 
      $("#scheduler").kendoTooltip({ 
       filter: ".k-event", 
       position: "top", 
       width: 250, 
       content: kendo.template($('#template').html()) 
      }); 
     }); 

</script> 

    <script id="template" type="text/x-kendo-template"> 
    #var uid = target.attr("data-uid");# 
    #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");# 
    #var model = scheduler.occurrenceByUid(uid);# 

    #if(model) {# 
     <strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br /> 
     <strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br /> 
     <strong>event description:</strong> #=model.description#<br /> 
    #} else {# 
     <strong>No event data is available</strong> 
    #}# 
</script> 

Working Demo