Articles in this section
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 };
   }
} 

Sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied