Kendo UI（计划程序）-悬停时显示描述工具提示（jQuery）

Question

我正在使用Kendo UI Scheduler ...

如何在jQuery中的悬停工具提示中显示说明？

在线演示

 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> 

是的，下面有一个示例，但是它在Angular 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>

工作演示