Category / Section
How to disable default tooltips for node and connector in Angular Diagram
1 min read
By default, when you interact with node or connector in the diagram- such a dragging, resizing or rotating-you’ll see a tooltip that displays information, including the node’s position, size and angle.
If you’d like to disable the default tooltip that appears while interacting with nodes or connectors can be disabled by removing the tooltip constraints from the SelectorConstraints of the selectedItems property of the diagram.
Below is a code example demonstrating how to disable the default tooltip
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]="getNodeDefaults" [constraints]="constraints" [selectedItems]='selectedItems'>
<e-nodes>
<e-node id='node1' [offsetX]=350 [offsetY]=150>
<e-node-annotations>
<e-node-annotation content="Default tooltip disabled">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint'>
<e-connector-annotations>
<e-connector-annotation content="Default tooltip disabled">
</e-connector-annotation>
</e-connector-annotations>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public constraints?: DiagramConstraints;
public selectedItems?: SelectorModel;
ngOnInit(): void {
//To disable default tooltip
this.selectedItems = { constraints: SelectorConstraints.All & ~SelectorConstraints.ToolTip };
}
}