Tooltip closes unexpectedly from mouse wheel scroll, even though OpensOn="Click"

[Sorin]

Hello SF team,
I'm using Syncfusion.Blazor version 19.3.0.56

I found improper behavior from the tooltip.
When the tooltip is in OpensOn="Click" mode, it's expected that only clicking the button will open/close the tooltip.
However I found that a mousewheel scroll outside of the tooltip will close it, and I believe this is not appropriate behavior.
To see the impact of this problem, I shared code and a gif which shows how the tooltip closes when trying to scroll through a dropdown selection.

I realize that a workaround exists for this by using the OpensOn="Custom" configuration.
However in that case I found that the Tool Tip does not seem to a built-in boolean to determine if it's already opened or closed. It has Event Callbacks for keeping track of open/close events, however this is more work to manage that state externally. Is it possible to add a current "open or closed" boolean to the SfTooltip class?

Attachment: TestItem_405e5f6d.zip

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Sorin, 

Greetings from Syncfusion support. 

The Tooltip’s pop-up element will be positioned as absolute and appended in the body element. So, if Tooltip target is placed into a scrollable container and on page scroll Tooltip’s pop-up will not hide along with its target, when we scroll beyond its viewable area. Due to this reason, we close the pop-up of Tooltip on page scroll. 

We suggest you to make use of OnOpen and OnClose events of Tooltip to find the whether Tooltip is in open/close state. 

@using Syncfusion.Blazor.Popups 

@using Syncfusion.Blazor.Buttons 

 

<div style="margin: 20px; height:100%"> 

    <h2> is Tooltip open: @TooltipState.ToString()</h2> 

    <SfTooltip @ref="@TestToolTip" OpensOn="Click" Target="#TestBtn" CssClass="filter-button-style" OnOpen="TooltipOpen" OnClose="TooltipClose" Content="Hello"> 

        <SfButton id="TestBtn" IconCss="e-icons e-chevron-down" IconPosition="IconPosition.Right">Button</SfButton> 

   </SfTooltip> 

</div> 

 

@code { 

 

    public bool TooltipState; 

    public SfTooltip TestToolTip { get; set; } 

 

    public async void OpenToolTip(MouseEventArgs args1) 

    { 

        await TestToolTip.OpenAsync(); 

    } 

    public async void CloseToolTip(MouseEventArgs args2) 

    { 

        await TestToolTip.CloseAsync(); 

    } 

 

    public void TooltipOpen() 

    { 

        TooltipState = true; 

    } 

 

    public void TooltipClose() 

    { 

        TooltipState = false; 

    } 

} 

Please let us know if you need any further assistance. 

Regards, 

Shameer Ali Baig S.

[Sorin]

Thank you Shameer for the explanation, it makes sense!

[Indhumathy Loganathan]

Hi Sorin,

We are glad that the provided details were helpful for you. Please get back to us if you need any further assistance.

Regards,

Indhumathy L