Close tooltip when click outside

[Lucas]

Hi, I have this tooltip:

My tooltip parameters are:

{ 

    ...

    opensOn: 'Custom',

    beforeRender: onBeforeRender

}

Inside the function onBeforeRender contains the code to insert the buttons "Choose" and the "X", the X has the click event to close this tooltip. But I don't know how can I detect the click outside the tooltip to close it?

Thanks.

[Vinoth Kumar Sundara Moorthy]

Hi Lucas, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement “To detect the click outside the tooltip to close it” and it can be achieved by checking the closest element of the click element target. In below code snippet we have created a click event for the document and get the target element from click event arguments. Based on the target, we have checked the closest element of tooltip component by using selector (the selector must be unique). If the target element is closest to tooltip, we have close it. 

 

Code Snippet 

let tooltip: Tooltip = new Tooltip({ 

    cssClass: ' tooltiptarget', //must be unique 

}); 

document.addEventListener("click", (args) => { 

    let targetElement = document.getElementById("target"); 

 

    //open the tooltip 

    if(args.target==targetElement) 

    { 

        tooltip.open(targetElement); 

    } 

 

    if (args.target != targetElement) 

    { 

        //check click element target is not inside the tooltip 

        if (!(args.target as any).closest(".tooltiptarget")) 

        { 

            tooltip.close(); 

        } 

 

        //close tooltip by click the button inside the tooltip component 

        if(args.target && (args.target as any).id=="btnclose") 

        { 

            tooltip.close(); 

        } 

    } 

} 

 

For your convenience we have prepared a sample. Please refer the sample below link, 

 

Sample Link: https://stackblitz.com/edit/typescript-7si36j?file=index.ts 

 

Could you please check the above details and get back to us if you need any further assistance on this?  

 

Regards, 

Vinoth Kumar S 

[Lucas]

Hi, thanks! This worked fine! It would be nice if this functionality is already available in the component.

[Vinoth Kumar Sundara Moorthy]

Hi Lucas, 

 

Thank you for the appreciation.  

 

We would like to let you know that when you set opensOn property value as Custom, the tooltip is not triggered by any default action. So, you must bind your own events and use either open or close public methods. 

 

Please refer the below documentation for using opensOn property value. 

 

UG Link: https://ej2.syncfusion.com/documentation/tooltip/open-mode/ 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Vinoth Kumar S