This is a migrated thread and some comments may be shown as answers.

Display tool tip on on hover of the slot

1 Answer 968 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
rugma
Top achievements
Rank 1
rugma asked on 05 Sep 2020, 08:19 AM

Hi, I am using kendo tool tip to show tool tip(formatted) on hover of the kendo scheduler slot. But currently the tooltip is getting displayed on hover of the title not on the slot hover.

 

Code Snippet

 

</ng-template>
          <kendo-scheduler-day-view> </kendo-scheduler-day-view>
          <kendo-scheduler-week-view> </kendo-scheduler-week-view>
          <kendo-scheduler-month-view> </kendo-scheduler-month-view>

          <ng-template kendoSchedulerEventTemplate let-event="event" class="status" >
            <div kendoTooltip
            filter=".status"
            [titleTemplate]="titleTemplate"
            [tooltipTemplate]="template"

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 09 Sep 2020, 12:31 AM

Hello Rugma,

We have a dedicated documentation to Render Tooltips for Grid Cells. Using the same example, I made the following changes to show Tooltips for the Slots in the Kendo UI Scheduler:

<ng-template #template let-anchor>
  <span>{{ slotText }}</span>
</ng-template>
 
<div
  kendoTooltip
  showOn="none"
  [tooltipTemplate]="template"
  filter=".k-scheduler-table tr td"
  (mouseover)="showTooltip($event)"
>
  <kendo-scheduler [kendoSchedulerBinding]="events"></kendo-scheduler>
</div>

@ViewChild(TooltipDirective, { static: false}) public tooltipDir: TooltipDirective;
public slotText;

public showTooltip(e: MouseEvent): void {
  const element = e.target as HTMLElement;

  if (element.nodeName === "TD") {
    if (element.attributes["ng-reflect-invariant-start"]) {
      var slotStart = element.attributes["ng-reflect-invariant-start"].value.slice(15, 21);
      var slotEnd = element.attributes["ng-reflect-invariant-end"].value.slice(15, 21);
      this.slotText = slotStart + " - " + slotEnd;
    } else {
      this.slotText = "All day";
    }
    this.tooltipDir.toggle(element);
  } else {
    this.tooltipDir.hide();
  }
}

In this StackBlitz example, when you hover over the Kendo UI Scheduler Slot, you will see the tooltip with the Slot range.

Let me know if this helps or I can further help you.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
rugma
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or