How could I use context menu with the tooltip component?

Question

Hello everybody,Is it possible to use the context menu with the tooltip?Something like this:Also, could this be done with the code side, not throw HTML elements? Do you have some examples of how this should be implemented?I want to have a generic solution so I can pass different tooltip text for every option in the context menu.Syncfusion and Angular version:Thank you,M

Gayathri KarunaiAnandam · Accepted Answer

Hi MM, 

We have checked your reported query; we can provide any content to tooltip in beforeRender event of tooltip as demonstrated in the below code snippet 
app.component.ts 





public addDisabled(args: MenuEventArgs) {  
    args.element.classList.add("e-custom-tooltip"); // to add the custom class for list items, to show the tooltip  
  }  
  ngAfterViewInit() {  
    //Initialize Tooltip component  
    this.tooltip = new Tooltip({  
      // default content of tooltip  
      content: "Loading...",  
      // set target element to tooltip  
      target: ".e-custom-tooltip",  
      // bind beforeRender event  
      beforeRender: this.onBeforeRender  
    });  
    this.tooltip.appendTo("body");  
  }  
   
public menuItems: MenuItemModel[] = [ 
    { 
      text: "Cut", 
      iconCss: "e-cm-icons e-cut", 
      id: "To remove" 
    }, 
    { 
      text: "Copy", 
      iconCss: "e-cm-icons e-copy", 
      id: "Duplicate" 
    }, 
    { 
      text: "Paste", 
      iconCss: "e-cm-icons e-paste", 
      id: "New Item", 
      items: [ 
        { 
          text: "Paste Text", 
          iconCss: "e-cm-icons e-pastetext", 
          id: "To pastetext" 
        }, 
        { 
          text: "Paste Special", 
          iconCss: "e-cm-icons e-pastespecial", 
          id: "To paste specialitem" 
        } 
      ] 
    }, 
    { 
      separator: true 
    }, 
    { 
      text: "Link", 
      iconCss: "e-cm-icons e-link", 
      id: "To connect" 
    }, 
    { 
      text: "New Comment", 
      iconCss: "e-cm-icons e-comment", 
      id: "Note" 
    } 
  ]; 
  //beforeRender event of tooltip  
  onBeforeRender(args: TooltipEventArgs): void {  
    this.content = args.target.id;  // Customize the tooltip content 
  }  
  

For your reference, we have prepared a sample by setting menu item id as tooltip content. Please refer the below link 

https://stackblitz.com/edit/angular-m3t5nv-svm3mr?file=app.component.ts 

Could you please check the above sample and get back to us, if you need any further assistance on this.  
 
Regards, 
Gayathri K

Sangeetha Priya Murugan · Answer

Hi MM, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement and it can be achievable in our context menu by using the beforeItemRender event as like as below. 
 




public addDisabled(args: MenuEventArgs) { 
    args.element.classList.add("e-custom-tooltip"); // to add the custom class for list items, to show the tooltip 
  } 
  ngAfterViewInit() { 
    //Initialize Tooltip component 
    this.tooltip = new Tooltip({ 
      // default content of tooltip 
      content: "Loading...", 
      // set target element to tooltip 
      target: ".e-custom-tooltip", 
      // bind beforeRender event 
      beforeRender: this.onBeforeRender 
    }); 
    this.tooltip.appendTo("body"); 
  } 
  
  //beforeRender event of tooltip 
  onBeforeRender(args: TooltipEventArgs): void { 
    this.content = args.target.textContent; 
  } 
 
 
Please find the sample link below. 
 
https://stackblitz.com/edit/angular-m3t5nv?file=app.component.ts  
 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M

MM · Answer

Thank you for your quick answer.Could please provide the example with the different content of the tooltip. We don't what the use same content as the title.Thank you

MM · Answer

Thank you.This is what I need.

Gayathri KarunaiAnandam · Answer

Hi MM, 
 
Thanks for the update. 
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
  
 
Regards, 
Gayathri K