How to hide a Tooltip when an outside click occurs

[Fernando Gonzalez Casillas]

Hi!

Mi scenario is as follows: I have a data grid in which one column I have this template:

<div *dxTemplate="let cell of 'advancedOptionsTemplate'">

                <ejs-tooltip #tooltip opensOn='Click' position="RightBottom" target="#content" (click)="$event.stopPropagation()">

                    <button ejs-button id="content" class="advanced-options" type="button"><i class="fas fa-coins"></i></button>

                    <ng-template #content style="padding: 0;">

                        <div class="advanced-options-menu">

                            <div class="advanced-options-menu-item" (click)="showBatchSelector(cell.data)">

                                <i class="fas fa-coins"></i>{{ l('LoadBatch') }}

                            </div>

                            <div class="advanced-options-menu-item" (click)="showPriceSelector(cell.data)">

                                <i class="fas fa-coins"></i>{{ l('LoadProduct') }}

                            </div>

                            <div class="advanced-options-menu-item" (click)="saveProductInCatalogue(cell.data)">

                                <i class="fas fa-coins"></i>{{ l('SaveIntoProductsCatalogue') }}

                            </div>

                        </div>

                    </ng-template>

                </ejs-tooltip>

            </div>

So the result is something like this:

But the problem is when I click outside the tooltip, It does not close and I can have things like:

So what can I do to close it? I tried a Host Directive but it only closes the first row tooltip (also, because of that, there is a (click)="$event.stopPropagation()" on the ejs-tooltip html element:

@HostListener('document:click', ['$event'])

    onTooltipClose(e: any): void {

        this.tooltipControl?.close();

    }

Thanks in advance

[SureshRajan Alagarsamy]

Hi Fernando,

We have reviewed your query and understand that you are looking to close the tooltip when selecting outside of the Tooltip component. To address this, we have implemented the Tooltip component inside a 'control-section' div and bound a click event for that 'control-section' div area in the “created” event handler. When you click on the 'control-section' div area, the tooltip will close using the "close" method in the click event handler.

Refer to the below code snippet for further reference.

[app.component.html]

 

<div class="control-section" style="height: 600px; width: 800px">

    <ejs-tooltip

      #tooltip

      (created)="created()"

      ....

     

    >

      ....

    </ejs-tooltip>

</div>

 

[app.component.ts]

 

export class AppComponent {

  @ViewChild('tooltip')

  public control: TooltipComponent;

 

  public created() {

    if (document.getElementsByClassName('control-section')) {

      document

        .getElementsByClassName('control-section')[0]

        .addEventListener('click', this.onClick.bind(this));

    }

  }

 

  public onClick(args: any) {

    if (args &&!args.target.parentNode.parentNode.classList.contains('e-tooltip')) {

      if ( this.control &&document.getElementsByClassName('e-tooltip-wrap').length > 0 ) {

        this.control.close();

      }

    }

  }

}

 

We have also attached a sample for your reference.

Sample : https://stackblitz.com/edit/angular-6hvxkz-nkytwn?file=src%2Fapp.component.ts

Regards,
Suresh.