Tooltips are not hidden after selecting a DropDownList item

[Oncoy Valverde Jesús Josué]

Hello

I am using tooltips for various DropDownList, when I place the cursor and choose an item by clicking on it, the tooltip is displayed, then the tooltip is not hidden and stays in place until I move the mouse wheel, sometimes I wait seconds and it disappears, but almost always it is not hidden. I tried the example in the documentation and got the same result. I took screenshots and attach them.

How can I solve this problem?

I also attach screenshots of my code

Thank you so much.

Attachment: DDLTooltip_570062a0.rar

[Deepak Ramakrishnan]

Hi Oncoy, 

 

Greetings from Syncfusion support. 

 

We have validated the reported issue at Tooltip component. The reported issue occur randomly, when target items of Tooltip is hovered quickly after closing the popup. You can avoid it by closing the Tooltip at popup close event with certain delay. You can refer the below code snippet and sample for reference. 

 

 

Sample Link :  https://stackblitz.com/edit/angular-snprkn-r7d9xt?file=app.component.ts  

 

[app.component.ts] 

onClose(e: any) { 

    setTimeout(() => { 

      this.tooltip.close(); 

    }, 250); 

  } 

 

 

 

 

Thanks, 

Deepak R. 

 

 

 

[Oncoy Valverde Jesús Josué]

Hello

Deepak R.

The problem persists, I played with the setTimeout values, even so, it does not work, the problem intensifies when I hover pointer over the selected element, for about 2 to 3 seconds (time taken for a user to read the information in the tooltip) then I clicked to choose the item and that is the moment when the tooltip doesn’t disappear.

Do you have any idea about how I can solve it? I would appreciate it.

I apologize for my bad English.

[Berly Christopher]

Hi Oncoy Valverde Jesús Josué, 

  

We will check the shared sample and provide the further details in two business days (17^th December 2021). 

  

Regards, 

Berly B.C 

05

[Oncoy Valverde Jesús Josué]

//I share the code with the modifications "component.ts"

public datosLista: Object = { text: 'nombre', value: 'idParametro' };

public itemToolTip: Tooltip;

 public content;

ngAfterViewInit() {

this.iniTooltipforDDL(); 

}

public iniTooltipforDDL():void{

    //Initialize Tooltip component

    this.itemToolTip = new Tooltip({

      // default content

      content: 'Loading...',

      // set target element

      target: '.e-list-item',

      // set position of tooltip

      position: 'TopCenter',

      // bind beforeRender event

      //closeDelay: 50,

      //opensOn: 'Hover',

      beforeRender: this.onBeforeRenderItem

    });

    this.itemToolTip.appendTo('body');

  }

onClose(e: any) {

    setTimeout(() => {

      this.itemToolTip.close();

    }, 200);

  }

  onBeforeRenderItem(args: TooltipEventArgs): void {

    // get the target element

    let listElement = document.getElementById('tooltipforddl');

    let result: Object[] = (listElement as any).ej2_instances[0].dataSource;

    let i: number;

    for (i = 0; i < result.length; i++) {

      if ((result[i] as any).nombre === args.target.textContent) {

        console.log((result[i] as any).nombre);

        this.content = (result[i] as any).nombre;

        (this as any).dataBind();

        (this as any).break;

      }

  } }

[Oncoy Valverde Jesús Josué]

"component.html"

<ejs-dropdownlist id= "tooltipforddl" placeholder="Eje Programático" floatLabelType="Always"

                      [dataSource]="cargarListasSider.listaEjeProgramatico" [fields]="datosLista"

                      [(value)]="proyecto.BuscarEje" (closer)='onClose($event)'>

</ejs-dropdownlist>

[Deepak Ramakrishnan]

We have validated the reported query. The Dropdown List popup close event is triggered before the popup closed completely. So target element is remained and tooltip is opened. To resolve this issue either set required time delay using setTimeout then call Tooltip close() method or call the popup close event after the popup is completely closed.  

  

For your reference, we modified the sample. Check the below code snippet.  

  

  onClose(e: any) {  

    var proxy = this;  

    setTimeout(function () {  

      proxy.tooltip.close();  

    }, 400);  

  }  

  

Sample: https://stackblitz.com/edit/angular-snprkn-cr6kzy?file=app.component.ts  

[Oncoy Valverde Jesús Josué]

I did the modification but the issue is still ongoing

[Deepak Ramakrishnan]

Hi Oncoy, 

 

We request you to provide simple runnable sample along with video demonstration to reproduce the issue in our end. As we couldn’t able the issue in our end . 

 

 

Thanks, 

Deepak R 

 

 

 

[David Koenig]

This is the first result on Google when dealing with this issue and a solution was never posted so I'll share what I did to fix it:

during the close event on the Dropdown list you need to get and store the child node that was appended to the body tag during the ngOnViewInit() and remove it.

onClose(event: PopupEventArgs) {

  let body = document.getElementsByTagName('body')[0];

  this.tooltipNode = body.childNodes[body.childNodes.length-1] as Node;

  body.removeChild(this.tooltipNode);

}

Then when you open it again, you need to check if that Node value is not null.  If it exists, re-append the Node back to the body element.

onOpen(event: PopupEventArgs) {

  if(this.tooltipNode != null) {

    let body = document.getElementsByTagName('body')[0];

    body.appendChild(this.tooltipNode);

  }

}

Trying to do it through the existing Tooltip object was not working as the removeChild() (or remove()) method was triggering the tooltip object to be destroyed.   However, by storing the Node we end up with an exact copy of the initial setup that functionally works the same as when the dropdown first renders.

[Priyanka Karthikeyan]

Hi David,

Thanks for your update. Please get back to us if you need any further assistance.

Regards,

Priyanka K

[Nagendra A]

Hi David, can you share a stackblitz link of your solution or full code of yours? Facing the same issue

[Kokila Poovendran]

Hi Nagendra A,

We apologize for any inconvenience you may have experienced. If you are still encountering the issue with the dropdown functionality, we kindly request you to provide us with a runnable sample and a video illustration of the problem. Having a working sample and a visual representation of the issue will greatly assist us in identifying the root cause and offering you an accurate resolution.

[David Koenig]

Hi, I just saw this so posting a reply now.   I made some updates which you can view in the stackblitz link.  The best method I found was to use an open and change events:

onChange(event: ChangeEventArgs) {

    EventHandler.clearEvents(this.tooltip?.element);

    if (this.tooltip) {

      this.tooltip.destroy();

    }

  }

  onOpen(event: PopupEventArgs) {

    this.tooltip = new Tooltip({

      content: 'Loading...',

      target: '.e-list-item, .e-rule-filter .e-input-group',

      position: 'TopCenter',

      beforeRender: this.onBeforeRender.bind(this),

    });

    this.tooltip.appendTo('body');

  }

On the change event I added a clear to the EventHandler, this is so we can remove the tooltip before the dropdown changes/closes and destroys the the tooltip object.   This was done prevent errors in the console in the case of clicking outside the tooltip.  everything else should be the same from my answer before.

https://stackblitz.com/edit/angular-snprkn-irwpeu?embed=1&file=app.component.ts

[Kokila Poovendran]

Hi David Koenig,

Thank you for promptly addressing Nagendra's query and sharing the details of your solution. We genuinely appreciate your effort and the time you took to provide a comprehensive response.

If you or Nagendra have any further concerns or questions, please don't hesitate to reach out. We're here to assist you.