Disabling a menu item with a tooltip

[Adam]

Good morning, 

Hoping someone here might have some ideas on this. I have a kendo-menu, and need to disable the menu-items underneath under certain circumstances: 

So something like this: 

<kendo-menu class="kendo-menu-project" >
  <kendo-menu-item [disabled]="isThisDisabled()">
    <ng-template kendoMenuItemTemplate>
      <tooltip-wrapper [tooltipContent]="'tooltip i'd like to show'">
        <span id="pg-mmenu-add-collate" (click)="doSomething()">Menu Item 1</span>
      <tooltip-wrapper>
    </ng-template>
  </kendo-menu-item>
....

 

 

The tooltip-wrapper is one of our components, whose template creates a kendoTooltip : 

 

<span kendoTooltip=""
      [showOn]="isToolTipHidden() ? 'none' : 'hover'"
      [tooltipWidth]="tooltipWidth"
      [tooltipClass]="(warning) ? 'c-warning' : ''"
      filter=".c-tooltip-element"
      [tooltipTemplate]="listView ? list : default"
      [position]="position"
      class="c-tooltip-wrapper">
  <span class="c-tooltip-element" [ngClass]="{ 'no-hide' : !overflowHidden }" [attr.tooltip-content]="listView ? tooltipContent.join('<br/>') : tooltipContent">{{spanText}}<ng-content></ng-content></span>
</span>

<ng-template #list let-anchor>
  <div *ngFor="let listValue of anchor.nativeElement.getAttribute('tooltip-content').split('<br/>')">
    <span>{{listValue}}</span>
  </div>
</ng-template>

<ng-template #default let-anchor>
  <span>{{anchor.nativeElement.getAttribute('tooltip-content')}}</span>
</ng-template>

 

No problems showing the tooltip under normal circumstances, but of course, once the menu items is disabled, the hover event doesn't propagate down to the tooltip component so it doesn't show. Is there anyway to accomplish this when the menu item is disabled? 

[Martin Bechev]

Hi Adam,

Thank you for the provided code snippets.

The Kendo UI for Angular Tooltip directive represents a popup with information that is related to a UI element that is displayed when this UI element is hovered over or clicked. The Tooltip also allows options for showing/hiding a tooltip programmatically through its API. That said, the directive depends on the pointer-events and user interactions on the related UI element in order to render properly. The position of the tooltip is again, relative to the described with a tooltip UI element and it is not intended to align it at the mouse pointer.

The Boolean disabled attribute, when present, makes the elements not mutable, focusable, and clickable. This is why the built-in functionality does not allow showing tooltips on a disabled element.

Regards,
Martin
Progress Telerik