Show Tooltip over Scheduler Events

Environment

Product	Telerik UI for ASP.NET MVC Scheduler
Product Version	Created with version 2024.4.1112

Description

How can I show a Tooltip when hovering over the ASP.NET MVC Scheduler events to provide additional information like start and end time, description, and more?

Solution

1. Define a Tooltip component that shows when the title of a specified event is hovered.

   Razor

       @(Html.Kendo().Scheduler<MeetingViewModel>()
           .Name("scheduler")
           ...// Additional configuration.
       )
   
       @(Html.Kendo().Tooltip()
           .For("#scheduler")
           .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
           .Position(TooltipPosition.Top)
       )

2. Create an external Kendo UI Template for the content of the Tooltip. You can modify the template content based on your requirements.

   Razor

       @(Html.Kendo().Tooltip()
           .For("#scheduler")
           .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
           .Position(TooltipPosition.Top)
           .Width(120)
           .ContentTemplateId("template")
       )

   Html

       <script id="template" type="text/x-kendo-template">
           #var element = target.is(".k-task") ? target : target.parent();# // Select the respective target element.
           #var uid = element.attr("data-uid");# // Access the "uid" of the hovered event.
           #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");# // Get a reference to the Scheduler.
           #var model = scheduler.occurrenceByUid(uid);# // Access the data of the hovered event.
   
           #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>

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository for how to show a Tooltip when hovering over a Scheduler event.

More ASP.NET MVC Scheduler Resources

• ASP.NET MVC Scheduler Documentation

• ASP.NET MVC Scheduler Demos

• ASP.NET MVC Scheduler Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET MVC

• Server-Side API Reference of the Scheduler for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base