Show Tooltip over Scheduler Events

Environment

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

Description

How can I show a Tooltip when hovering over the ASP.NET Core 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.

       @(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)
       )
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-scheduler name="scheduler">
           <!-- Other configuration -->
       </kendo-scheduler>
   
       <kendo-tooltip name="scheduler" filter=".k-event:not(.k-event-drag-hint) > div, .k-task" position="top">
       </kendo-tooltip>
   

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

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

       @addTagHelper *, Kendo.Mvc
   
       <kendo-tooltip name="scheduler" 
           filter=".k-event:not(.k-event-drag-hint) > div, .k-task" 
           position="top"
           width="120"
           content-template-id="template">
       </kendo-tooltip>
   

       <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. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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

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

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

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base