Adding matToolTip to item template

[Suriaprakash Chellappa]

Hi,

Am constructing AutoComplete dynamically and add  it to rich text editor tool bar. Want to use MatToolTip for each item in autocomplete. May I know how can I do that?

The data get rendered but the Mat Tool Tip not rendered. How can we use mat controls  and/or directives in itemTemplate

Below my code.

 this.qtlAutoComplete = new AutoComplete({

      dataSource: data,

      fields: { text: 'displayName' },

      placeholder: 'Search Quick Text',

      itemTemplate: '<span [matToolTip]="${displayName}"> ${displayName} </span>',

      cssClass: 'rte_searchbox',

      focus: (args) => {

        this.rteRange = this.savedRteSelection.getRange(document);

      }

     

    });

[Yohapuja Selvakumaran]

Hi Suriaprakash Chellappa

Thank you for reaching out to us. We've implemented the tooltip functionality for the items inside the dropdownlist as per your requirement using the itemTemplate. Here's how you can integrate it into your code:

 <ejs-autocomplete

      id="atcelement"

      [dataSource]="data"

      [sortOrder]="sorting"

      [fields]="fields"

      [query]="query"

      [placeholder]="text"

    >

      <ng-template #itemTemplate="" let-data="">

        <!--set the value to itemTemplate property-->

        <span

          ><span class="name" title="{{data.FirstName}}">

            {{data.FirstName}}</span

          ></span

        >

      </ng-template>

    </ejs-autocomplete>

 

In this code snippet, we've utilized the itemTemplate to customize the appearance of each item in the dropdownlist. The title attribute of the inner span element is set to display the FirstName property of the data object as a tooltip when hovered over.

You can examine the provided sample for a more in-depth understanding and testing,

Sample: https://stackblitz.com/edit/github-4oht7n-kxokeh?file=src%2FitemTemplate.html

Regards,

Yohapuja S

[Suriaprakash Chellappa]

Hi,

I think my question is wrongly understand. Am using some style to show the tooltip and we already defined everything for mat tooltip.

Also am adding this AutoComplete in RTF editor toolbar. It would be nice to show the examples in ts code instead of html.

Also how to add mat form fields in to RTF tool bar

[Yohapuja Selvakumaran]

Hi Suriaprakash Chellappa,

We apologize for the delay in our update. We have checked this query with the respective team, and we have branched this query to a separate forum. You can track the progress and receive updates by following the forum link provided below:

Forum: https://www.syncfusion.com/forums/188031/adding-mattooltip-to-item-template-for-custom-toolbar-of-richtexteditor-from-187877

Regards,

Yohapuja S