How could I use context menu with the tooltip component?

[MM]

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

[Sangeetha Priya Murugan]

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]

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 

[Gayathri KarunaiAnandam]

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 

[MM]

Thank you.

This is what I need.

[Gayathri KarunaiAnandam]

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