Is it possible to use the SfPopup as a tooltip?

I'm looking at creating a custom tool tip for buttons within my header. The idea would be when a mouse hovers over a icon button for example, the tool tip would show with the description of the button.

I thought i could use the Sfpopup to do this as i have lots of control over the UI of the tooltip, however when the popup is showing, i cannot interact with the page below it, even if i use disable the overlay using:  ShowOverlayAlways="False"


Is there a way to allow the popup to be shown, whilst also allowing interaction with the element below. I.e clicking the button where the popup is showing next to? 


5 Replies

SY Suthi Yuvaraj Syncfusion Team May 16, 2024 02:09 PM UTC

Hi Josh Southern , 

We have checked your requirement, we would like to let you know that when the SfPopup is in view, you cannot access the items underneath the Popup, the Overlay will appear. Whereas if the ShowOverlay is false , the Overlay background color will be changed to Transparent, and the overlay is not removed from the view. The first mouse click will close the popup and the second will access the element below the popup. which is the actual behavior. We have attached the sample for your reference. Please have a look at the sample and let us know if you have any concerns.

Regards,

Suthi Yuvaraj.



Attachment: PopupToolkit_32f8da77.zip


JS Josh Southern May 16, 2024 05:28 PM UTC

Hi Suthi

I appreciate the response.

Just a few things

1) In the code, there is a 
PointerExited="OnPointerExited" and PointerMoved="OnPointerMoved" however these event are not in the code behind. I assume just an error and not actually needed anyway? 


2) I think the 2 clicks needed to remove the popup and then hit the button are not suitable. User won't expect they need to click twice in order to action the button. Their expectation would be that they can click the bottom even whilst the tooltip is being shown, and hence only the 1 click is needed? (this is how most apps that display tooltips would behave) Is it somehow possible to do with with the Sfpopup, and allow interaction with the elements on the page, or it is simple not something that is possible? 




SY Suthi Yuvaraj Syncfusion Team May 17, 2024 01:25 PM UTC

Josh Southern,

We would like to let you know that, As per the provided sample, we have implemented the code in PointerEntered, you can customize the Exited and Moved events as per your specifications. 

Additionally, we want to inform you that while the SfPopup (Tooltip) is open, the items underneath the overlay are inaccessible. The initial click will dismiss the popup, and a subsequent click will then allow you to interact with the items behind it. This behavior is by design.

Please let us know if you have any concerns.



LW Lucas Wiksten replied to Suthi Yuvaraj July 3, 2025 01:22 PM UTC

Would it be possible to, in the future, add an option to SfPopup to allow click-events to propagate to underlying controls? So that a click outside of the popup would close the popup but also interact with an element, a button for example, without the need for an extra click.

I understand that an initial click to dismiss the popup followed by a subsequent click to interact with controls behind is by design, but the option to access controls behind while the popup is opened would open up a wide range of possible use-cases for SfPopup, such as tooltips and custom drop down menus, for example.



AP Abinesh Palanisamy Syncfusion Team July 4, 2025 12:32 PM UTC

Hi Lucas,
 
As of now, SfPopup does not have support to interact with background elements while Popup is open. We have considered your request as a feature. We will implement this feature in any of our upcoming releases. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We appreciate your patience and understanding until then. You can follow up with the below feedback for further details,
Feedback link: 68680
Regards,
Abinesh P


Loader.
Up arrow icon