New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Show Tooltip over Scheduler Events

Environment

ProductTelerik UI for ASP.NET MVC Scheduler
Product VersionCreated 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")
        )

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

See Also