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
