@progress/kendo-angular-diagrams 21.0.0-develop.26 → 21.0.0-develop.28

package/esm2022/shape-tooltip-template.directive.mjs

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Defines a custom template for shape tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over shapes.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramShapeTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+export class ShapeTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDiagramShapeTooltipTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

package/fesm2022/progress-kendo-angular-diagrams.mjs

@@ -2,15 +2,15 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { placeTooltip, events, convertToDiagramModel, loadTheme, Diagram } from '@progress/kendo-diagram-common';
-export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, DataInputOutput, DataStorage, Database, Decision, Delay, Diagram, DirectAccessStorage, Display, Document, Extract, FlowchartShapeType, Group, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Shape, Sort, SummingJunction, Terminator, TextBlock, convertToDiagramModel } from '@progress/kendo-diagram-common';
+import { Shape, Connection, placeTooltip, events, convertToDiagramModel, loadTheme, Diagram } from '@progress/kendo-diagram-common';
+export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, Extract, FlowchartShapeType, Group, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Shape, Sort, SummingJunction, Terminator, TextBlock, convertToDiagramModel } from '@progress/kendo-diagram-common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, HostBinding, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Directive, EventEmitter, Component, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { NgIf } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 
 /**
  * @hidden
@@ -20,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762796695,
-    version: '21.0.0-develop.26',
+    publishDate: 1762875162,
+    version: '21.0.0-develop.28',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -51,6 +51,90 @@ const SHAPE_DEFAULTS = {
     selectable: true,
 };
 
+/**
+ * Defines a custom template for shape tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over shapes.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramShapeTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+class ShapeTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDiagramShapeTooltipTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+/**
+ * Defines a custom template for connection tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over connections.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramConnectionTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+class ConnectionTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDiagramConnectionTooltipTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
  *
@@ -82,12 +166,6 @@ class DiagramComponent {
      *
      */
     connections = [];
-    /**
-     * Controls whether the `Diagram` tooltips are displayed when hovering over shapes and connections ([see example](slug:diagram_tooltips)).
-     * @default false
-     *
-     */
-    tooltip = false;
     /**
      * Defines the field mapping configuration for connections data binding ([see example](slug:diagram_data_binding#field-mapping)).
      * Maps source object properties to `Diagram` connection properties.
@@ -255,6 +333,10 @@ class DiagramComponent {
      * @hidden
      */
     licenseMessage;
+    /**
+     * @hidden
+     */
+    customTemplate;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -279,15 +361,15 @@ class DiagramComponent {
      * Current popup instance for tooltip.
      */
     tooltipPopup;
-    /**
-     * Template reference for tooltip content.
-     */
-    tooltipTemplate;
+    defaultTooltipTemplate;
+    customTooltipTemplate;
+    shapeTooltipTemplate;
+    connectionTooltipTemplate;
     /**
      * @hidden
-     * Current tooltip content for template context.
+     * The original data item provided by the user. Passed in the tooltip template context.
      */
-    tooltipContent = '';
+    dataItem;
     constructor(wrapperElement, renderer, zone, popupService, viewContainer) {
         this.wrapperElement = wrapperElement;
         this.renderer = renderer;
@@ -360,6 +442,7 @@ class DiagramComponent {
         }
         if (recreate) {
             this.init();
+            this.bindDiagramEvents();
         }
     }
     ngAfterViewInit() {
@@ -652,40 +735,87 @@ class DiagramComponent {
      */
     handleTooltipShow(event) {
         this.hideTooltip();
-        if (event.item.options.tooltip?.visible) {
-            this.tooltipContent = event.item.options.tooltip?.text;
-            this.tooltipPopup = this.popupService.open({
-                content: this.tooltipTemplate,
-                appendTo: this.viewContainer
-            });
-            const popupElementRect = this.tooltipPopup.popup.instance.container.nativeElement.querySelector('.k-tooltip').getBoundingClientRect();
-            const zoom = event.item.diagram.zoom();
-            const pan = event.item.diagram.pan();
-            const diagramRect = this.diagramWidget.element.getBoundingClientRect();
-            const win = this.diagramWidget.element.ownerDocument.defaultView;
-            const lines = this.diagramWidget.connections.map(con => con.allPoints());
-            const shapes = this.diagramWidget.shapes.map(shp => shp.bounds());
-            const pos = placeTooltip({
-                hovered: event.item,
-                mouse: event.point,
-                shapes: shapes,
-                connections: lines,
-                diagramRect: diagramRect,
-                zoom: zoom,
-                pan: pan,
-                tooltipSize: { width: popupElementRect.width, height: popupElementRect.height },
-                viewportBounds: new DOMRect(0, 0, win.innerWidth, win.innerHeight)
-            });
-            this.tooltipPopup.popup.instance.offset = { left: pos.left + win.scrollX, top: pos.top + win.scrollY };
-            this.tooltipShow.emit(event);
+        const dataItem = event.item.dataItem;
+        const isShape = event.item instanceof Shape;
+        const isConnection = event.item instanceof Connection;
+        this.setCustomTemplate(isShape, isConnection);
+        const defaultsEnabled = isShape
+            ? this.options.shapeDefaults.tooltip?.visible
+            : this.options.connectionDefaults.tooltip?.visible;
+        const itemTooltipEnabled = dataItem.tooltip?.visible;
+        const optionsArray = isShape ? this.options.shapes : this.options.connections;
+        const optionsItem = optionsArray?.find((item) => item.id === event.item.id);
+        const hasTooltipText = !!dataItem.tooltipText || !!optionsItem?.tooltipText;
+        if (!dataItem.tooltipText && optionsItem?.tooltipText) {
+            dataItem.tooltipText = optionsItem.tooltipText;
+        }
+        const shouldShowTooltip = itemTooltipEnabled !== false && hasTooltipText && (defaultsEnabled || itemTooltipEnabled);
+        if (shouldShowTooltip) {
+            this.dataItem = dataItem;
+            let popupContent = this.defaultTooltipTemplate;
+            const showCustomTemplate = Boolean((isShape && this.shapeTooltipTemplate) || (isConnection && this.connectionTooltipTemplate));
+            if (showCustomTemplate) {
+                popupContent = this.customTooltipTemplate;
+            }
+            const popupClass = this.popupClass(isShape, dataItem);
+            this.showTooltip(event, popupContent, popupClass);
+        }
+    }
+    showTooltip(event, content, popupClass) {
+        this.tooltipPopup = this.popupService.open({
+            content: content,
+            appendTo: this.viewContainer,
+            popupClass,
+            animate: false
+        });
+        const contentElement = this.tooltipPopup.popupElement.querySelector('.k-popup');
+        if (content === this.defaultTooltipTemplate) {
+            this.renderer.addClass(contentElement, 'k-tooltip');
+        }
+        const popupElementRect = contentElement.getBoundingClientRect();
+        const zoom = event.item.diagram.zoom();
+        const pan = event.item.diagram.pan();
+        const diagramRect = this.diagramWidget.element.getBoundingClientRect();
+        const win = this.diagramWidget.element.ownerDocument.defaultView;
+        const lines = this.diagramWidget.connections.map(con => con.allPoints());
+        const shapes = this.diagramWidget.shapes.map(shp => shp.bounds());
+        const pos = placeTooltip({
+            hovered: event.item,
+            mouse: event.point,
+            shapes: shapes,
+            connections: lines,
+            diagramRect: diagramRect,
+            zoom: zoom,
+            pan: pan,
+            tooltipSize: { width: popupElementRect.width, height: popupElementRect.height },
+            viewportBounds: new DOMRect(0, 0, win.innerWidth, win.innerHeight)
+        });
+        this.tooltipPopup.popup.instance.offset = { left: pos.left + win.scrollX, top: pos.top + win.scrollY };
+        this.tooltipShow.emit({ ...this.dataItem });
+    }
+    popupClass(isShape, dataItem) {
+        const defaultCssClass = isShape
+            ? this.options.shapeDefaults?.tooltip?.cssClass
+            : this.options.connectionDefaults?.tooltip?.cssClass;
+        const itemCssClass = dataItem.tooltip?.cssClass;
+        const popupClass = defaultCssClass || itemCssClass;
+        return popupClass;
+    }
+    setCustomTemplate(isShape, isConnection) {
+        this.customTemplate = null;
+        if (isShape && this.shapeTooltipTemplate) {
+            this.customTemplate = this.shapeTooltipTemplate.templateRef;
+        }
+        if (isConnection && this.connectionTooltipTemplate) {
+            this.customTemplate = this.connectionTooltipTemplate.templateRef;
         }
     }
     /**
      * Handles the tooltipHide event from the diagram widget.
      */
-    handleTooltipHide(event) {
+    handleTooltipHide() {
         this.hideTooltip();
-        this.tooltipHide.emit(event);
+        this.tooltipHide.emit({ ...this.dataItem });
     }
     /**
      * Hides the current tooltip and cleans up resources.
@@ -695,7 +825,6 @@ class DiagramComponent {
             this.tooltipPopup.close();
             this.tooltipPopup = undefined;
         }
-        this.tooltipContent = '';
     }
     activeEmitter(name) {
         const emitter = this[name];
@@ -721,15 +850,15 @@ class DiagramComponent {
                 if (eventName === 'itemBoundsChange') {
                     eventName = 'shapeBoundsChange';
                 }
-                if (this.tooltip && eventName === 'tooltipShow') {
+                if (eventName === 'tooltipShow') {
                     this.zone.run(() => {
                         this.handleTooltipShow(e);
                     });
                     return;
                 }
-                if (this.tooltip && eventName === 'tooltipHide') {
+                if (eventName === 'tooltipHide') {
                     this.zone.run(() => {
-                        this.handleTooltipHide(e);
+                        this.handleTooltipHide();
                     });
                     return;
                 }
@@ -757,15 +886,27 @@ class DiagramComponent {
                     map: this.createFieldMapping(this.connectionModelFields)
                 }
             };
-            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.connections }, mapping);
-            this.convertedShapes = result.shapes;
-            this.convertedConnections = result.connections;
+            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.options.connections }, mapping);
+            this.convertedShapes = this.addDataItemProperty(result.shapes, this.shapes);
+            this.convertedConnections = this.addDataItemProperty(result.connections, this.connections);
         }
         else {
-            this.convertedShapes = this.shapes || [];
-            this.convertedConnections = this.connections || [];
+            this.convertedShapes = this.addDataItemProperty(this.shapes, this.shapes);
+            this.convertedConnections = this.addDataItemProperty(this.connections, this.connections);
         }
     }
+    addDataItemProperty(array, sourceArray) {
+        if (!array || !Array.isArray(array) || array.length === 0) {
+            return [];
+        }
+        if (!sourceArray || !Array.isArray(sourceArray)) {
+            return array;
+        }
+        return array.map((item, index) => ({
+            ...item,
+            dataItem: sourceArray[index]
+        }));
+    }
     /**
      * Creates field mapping configuration from model fields.
      */
@@ -802,12 +943,17 @@ class DiagramComponent {
         this.diagramWidget?.setOptions(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", tooltip: "tooltip", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], viewQueries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-        <ng-template *ngIf="tooltip" #tooltipTemplate let-content="content">
-            <div class="k-tooltip">{{tooltipContent}}</div>
+
+        <ng-template #customTooltipTemplate>
+            <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+
+        <ng-template #defaultTemplate>
+            {{dataItem?.tooltipText}}
+        </ng-template>
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -817,11 +963,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-diagram',
                     template: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-        <ng-template *ngIf="tooltip" #tooltipTemplate let-content="content">
-            <div class="k-tooltip">{{tooltipContent}}</div>
+
+        <ng-template #customTooltipTemplate>
+            <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
+        </ng-template>
+
+        <ng-template #defaultTemplate>
+            {{dataItem?.tooltipText}}
         </ng-template>
         `,
-                    imports: [WatermarkOverlayComponent, NgIf],
+                    imports: [WatermarkOverlayComponent, NgIf, NgTemplateOutlet, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective],
                     providers: [PopupService]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{
@@ -831,8 +982,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], connections: [{
                 type: Input
-            }], tooltip: [{
-                type: Input
             }], connectionModelFields: [{
                 type: Input
             }], editable: [{
@@ -887,9 +1036,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], tooltipHide: [{
                 type: Output
-            }], tooltipTemplate: [{
+            }], defaultTooltipTemplate: [{
                 type: ViewChild,
-                args: ['tooltipTemplate']
+                args: ['defaultTemplate']
+            }], customTooltipTemplate: [{
+                type: ViewChild,
+                args: ['customTooltipTemplate']
+            }], shapeTooltipTemplate: [{
+                type: ContentChild,
+                args: [ShapeTooltipTemplateDirective]
+            }], connectionTooltipTemplate: [{
+                type: ContentChild,
+                args: [ConnectionTooltipTemplateDirective]
             }] } });
 
 /**
@@ -912,7 +1070,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 const KENDO_DIAGRAM = [
-    DiagramComponent
+    DiagramComponent,
+    ShapeTooltipTemplateDirective,
+    ConnectionTooltipTemplateDirective
 ];
 
 /**
@@ -948,8 +1108,8 @@ const KENDO_DIAGRAM = [
  */
 class DiagramModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [DiagramComponent], exports: [DiagramComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [KENDO_DIAGRAM] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective], exports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [DiagramComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, decorators: [{
             type: NgModule,
@@ -959,9 +1119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+;
+;
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DiagramComponent, DiagramModule, KENDO_DIAGRAM };
+export { ConnectionTooltipTemplateDirective, DiagramComponent, DiagramModule, KENDO_DIAGRAM, ShapeTooltipTemplateDirective };
 

package/index.d.ts

@@ -2,8 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { DiagramOptions, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, ShapeDefaults, ShapeOptions, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, ConnectionOptions, ConnectionDefaults, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, Circle, Group, FlowchartShapeType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, MarkerType, ConnectionCap, ConnectionContent, convertToDiagramModel, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn } from '@progress/kendo-diagram-common';
+export { ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, Circle, Group, FlowchartShapeType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, MarkerType, ConnectionCap, ConnectionContent, convertToDiagramModel, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn } from '@progress/kendo-diagram-common';
 export { DiagramModule } from './diagram.module';
 export { DiagramComponent } from './diagram.component';
+export { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
+export { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
 export * from './directives';
 export * from './models';

package/models.d.ts

@@ -2,6 +2,81 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ShapeDefaults as ShapeDefaultsCommon } from '@progress/kendo-diagram-common';
+import { ConnectionDefaults as ConnectionDefaultsCommon } from '@progress/kendo-diagram-common';
+import { ConnectionOptions as ConnectionOptionsCommon } from '@progress/kendo-diagram-common';
+import { ShapeOptions as ShapeOptionsCommon } from '@progress/kendo-diagram-common';
+import { DiagramOptions as DiagramOptionsCommon } from '@progress/kendo-diagram-common';
+/**
+ * Defines the tooltip configuration for shapes and connections.
+ * Controls the visibility, content, and styling of tooltips.
+ */
+export interface TooltipOptions {
+    /**
+     * Controls whether the tooltip displays when you hover over the item.
+     */
+    visible?: boolean;
+    /**
+     * Sets custom CSS classes for the Tooltip wrapper element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    cssClass?: any;
+}
+/**
+ * Defines the configuration options for diagram shapes.
+ * Extends the base shape options and adds tooltip support.
+ */
+export interface ShapeOptions extends ShapeOptionsCommon {
+    /**
+     * Configures the tooltip that displays when you hover over the shape.
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Sets the text content displayed in the tooltip.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the configuration options for diagram connections.
+ * Extends the base connection options and adds tooltip support.
+ */
+export interface ConnectionOptions extends ConnectionOptionsCommon {
+    /**
+     * Configures the tooltip that displays when you hover over the connection.
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Sets the text content displayed in the tooltip.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the default configuration options for all connections in the `Diagram`.
+ * These settings apply to connections unless overridden by individual connection options.
+ */
+export interface ConnectionDefaults extends ConnectionDefaultsCommon {
+    /**
+     * Configures the default tooltip settings for all connections.
+     */
+    tooltip?: TooltipOptions;
+}
+/**
+ * Defines the default configuration options for all shapes in the `Diagram`.
+ * These settings apply to shapes unless overridden by individual shape options.
+ */
+export interface ShapeDefaults extends ShapeDefaultsCommon {
+    /**
+     * Configures the default tooltip settings for all shapes.
+     */
+    tooltip?: TooltipOptions;
+}
+/**
+ * @hidden
+ *
+ */
+export interface DiagramOptions extends DiagramOptionsCommon {
+    shapeDefaults?: ShapeDefaults;
+    connectionDefaults?: ConnectionDefaults;
+}
 /**
  * Defines the field mapping configuration for shapes data binding.
  * Maps source object properties to `Diagram` shape properties.
@@ -103,6 +178,10 @@ export interface ShapeModelFields {
      * The field that contains the data item reference.
      */
     dataItem?: string;
+    /**
+     * The field that contains the tooltip text.
+     */
+    tooltipText?: string;
 }
 /**
  * Defines the field mapping configuration for connections data binding.
@@ -125,4 +204,8 @@ export interface ConnectionModelFields {
      * The field that contains the data item reference.
      */
     dataItem?: string;
+    /**
+     * The field that contains the tooltip text.
+     */
+    tooltipText?: string;
 }