Adding matToolTip to item template for Custom toolbar of RichTextEditor - from 187877

[Suriaprakash Chellappa]

Hi,

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

[Vinitha Jeyakumar]

Hi Suriaprakash Chellappa,

Your requirement to use matTooltip for the autoComplete items, which is configured as a custom toolbar in RichTextEditor can be achieved by appending the autoComplete control into the Editor's custom toolbar like below,

Code snippet:

<div class="control-section">

  <div id="content" style="margin: 0px auto; width:300px; padding-top: 40px;">

    <ejs-richtexteditor

      id="customRTE"

      #customRTE

      [toolbarSettings]="tools"

      (actionComplete)="actionCompleteHandler($event)">

    </ejs-richtexteditor>

    <div style="float: right">

      <ejs-autocomplete

        (created)="created()"

        id="employees"

        [dataSource]="data"

        [fields]="fields"

        [placeholder]="watermark"

        width="200"

      >

        <ng-template #itemTemplate let-data>

          <div>

            <div class="ename" matTooltip="{{ data.Name }}">

              {{ data.Name }}

            </div>

          </div>

        </ng-template>

      </ejs-autocomplete>

    </div>

  </div>

</div>

public tools: ToolbarModule = {

    items: [

      'Bold',

      {

        tooltipText: 'Insert Symbol',

        template: '<div id="custom"></div>',

      },

      ....

....

    ],

  };

  

  public created() {

    document

      .getElementById('custom')

      .appendChild(document.getElementById('employees'));

    this.rteObj.refreshUI();

  }

Stackblitz-sample: https://stackblitz.com/edit/angular-duo6ch-pwwij2?file=src%2Fapp.component.ts

Regards,

Vinitha