We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Close tooltip when click outside

Thread ID:

Created:

Updated:

Platform:

Replies:

147471 Sep 11,2019 07:07 PM UTC Sep 13,2019 05:26 AM UTC JavaScript - EJ 2 3
loading
Tags: Tooltip
Lucas
Asked On September 11, 2019 07:07 PM UTC

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 [Syncfusion]
Replied On September 12, 2019 10:05 AM UTC

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, 
 
 
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
Replied On September 12, 2019 11:28 AM UTC

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

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On September 13, 2019 05:26 AM UTC

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. 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon