OpensOn Click Works, But OpensOn Focus... | Blazor Forums

OpensOn Click Works, But OpensOn Focus Does Not

Mike-E · 2025-12-10T19:44:17.2300000+00:00

Hi Team Syncfusion,I am implementing a SfTooltip Control and have it working perfectly with OpensOn="Click", which works, but I would rather have the tooltip display when it is focused (and hide when not). When I attempt to use OpensOn="Focus", however, nothing happens at all.Is there a way to find out why it's not working? Is this a known issue?Thank you as always for your great assistance!

SM Suresh Masanam Syncfusion Team December 11, 2025 12:14 PM UTC

The OpensOn property in the Syncfusion Blazor Tooltip component supports multiple modes, including Hover, Click, and Focus. When using OpensOn="Focus", the tooltip will appear when the target element receives focus and hide when it loses focus. This works only on focusable elements such as <input>, <button>, or elements with tabindex.

Here’s a simple example:

<SfTooltip Target=".focus-input"

Content="Tooltip opens on focus"

OpensOn="Focus">

</SfTooltip>

If the tooltip does not appear on focus, check the following:

Ensure the target element is focusable (add tabindex="0" for non-input elements).
Verify that the Target selector matches the actual element receiving focus.
If the element is rendered dynamically, consider using TargetContainer to register the tooltip correctly.

For more details, refer to the official documentation: Tooltip Open Mode

Working sample for reference: Tooltip Open Mode Focus

MI Mike-E December 12, 2025 11:40 AM UTC

Hi Suresh, thank you very much for your time and to help explain, it is valuable and appreciated. I did try to use tabindex="0" but did not have any luck. Here is my Razor:

```

@using Microsoft.FluentUI.AspNetCore.Components.Icons.Regular

@using Syncfusion.Blazor.Popups

</span>

</SfTooltip>

</span>

@code {

readonly string _identifier = UniqueIdentifiers.Default;

string _content = string.Empty;

[Parameter]

public required RenderFragment ChildContent { get; set; }

public override async Task SetParametersAsync(ParameterView parameters)

{

var changed = parameters.DidParameterChange(nameof(ChildContent), ChildContent);

await base.SetParametersAsync(parameters).Off();

_content = changed ? ChildContent.Text() : _content;

}

```

Is there another consideration here for using a `span`? I did try also to apply tabindex to the FluentIcon directly. It renders as an svg tag and the attribute is emitted, but it still does not work (display the popup).

Thank you for any continued assistance you can provide.

SM Suresh Masanam Syncfusion Team December 15, 2025 12:12 PM UTC

Thanks for sharing the snippet. In your code you have Target="@_identifier". The Target property expects a selector string, not the raw id.

If your target is the element with id="@_identifier". Target="@_identifier" won’t work if the API expects a selector rather than a raw id. Most UI libraries (Bootstrap, Blazor component libraries, etc.) require a CSS selector string—typically #<id>. so the underlying code can run querySelector and find the element.

Sample Code :

<span @onclick:stopPropagation="true" @onclick:preventDefault="true" style="display:inline">

    <SfTooltip Target="@($"#{_identifier}")" Content="@_content" OpensOn="Focus" >

        <span id="@_identifier" tabindex="0" class="circle-icon">

            <icon class="mx-1 mb-1">Icon</icon>

        </span>

    </SfTooltip>

</span>

@code {

    public string _identifier = "target";

    string _content = "Tooltip";

}

What to use

If you have an element id like myElement, the Target should be "#myElement".
If your id is stored in a variable (e.g., _identifier), build the selector as $"#{_identifier}".

Why this matters

A selector (e.g., #myElement) is what DOM methods such as document.querySelector accept. Passing just myElement (without #) is interpreted as a tag selector, not an id, and will not match your element.

For more details, refer to the official documentation: Tooltip Target

Working sample for reference: Tooltip Target Sample

MI Mike-E December 28, 2025 08:59 AM UTC

Hi Suresh,

Thank you very much for your continued assistance and please pardon the delay in getting back to you here, as I was not able to attend to this until now.

To start, your suggestion worked! Thank you. However, using this markup:

</SfTooltip>

</span>

I am seeing the popup display at the top and not BottomCenter as defined:

Image_9542_1766912143564

Additionally, I noticed a minor rendering bug. If I display the pop-up and then unfocus the browser window, the pop-up hides. However, if I re-focus the browser window by selecting another pop-up, both pop-ups are displayed:

https://i.imgur.com/Ff2ts7Z.gif

Thank you for any further suggestions you can provide. Happy Holidays. 🙏

MI Mike-E December 28, 2025 09:01 AM UTC

BTW, I would use an SfIcon control if you have one. 😊 I have tried using your icons, but the classing system you have is too complicated. Each time I try to use an icon, it is a lot of work to find the one I want and then define it in css, and then apply it accordingly. Whereas with FluentIcon and RadzenIcon, it is a simple Enum and I am done. Thank you for any consideration in improving your experience in this area.

MI Mike-E December 28, 2025 09:28 AM UTC

Hi Suresh, please pardon the chatter here. OpensOn="Click" actually works exactly how I expect, except for desktop.

In mobile, when I press on and press away from it, it disappears as expected:

https://i.imgur.com/EDZjPW8.gif

However, when I press away on desktop, it does not:

https://i.imgur.com/fquQRjr.gif

Is there a reason why the behavior is different? Is there a way to hide the pop-up when OpensOn="Click" is set and the user presses outside of the control as it does in mobile? Thank you for your continued assistance.

KN Kundurthi Naga Siddartha Kundurthi Vennela Prasad Syncfusion Team January 6, 2026 10:48 AM UTC

Hi Mike-E,

Based on the details you have shred we have prepared a sample demonstrating the following scenarios:

Two icons with different tooltips and unique IDs.
Two icons with the same tooltip but different IDs.

In both scenarios, the tooltip appears correctly when hovering over each icon—only the relevant one is shown—and it disappears once the hover is removed, it works as expected.

For your reference, we have included the sample we used along with a GIF demonstration:

GIF:

Sample:

Two icons with different tooltips and unique IDs - https://blazorplayground.syncfusion.com/embed/hDrdZCtxLyohFJTw?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Two icons with the same tooltip but different IDs - https://blazorplayground.syncfusion.com/embed/LjrntstxKZNKhNCg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please use the provided sample as a reference to adjust your implementation and achieve the desired behavior. If you continue to encounter issues, we kindly request that you provide additional details about the issue, as mentioned below:

Please share a runnable sample that demonstrates the issue you are experiencing. You may also modify the above shared sample to reflect your specific scenario. This will help us understand how you are integrating and handling the component in your project.
Issue replication steps.
A video illustration of the issue.

Your input will help us narrow down the root cause and provide a more accurate and effective solution.

Using Syncfusion Icons:

Syncfusion Icons are straightforward to use. You simply need to include the SfIcon tag wherever you want to display the icon. By setting the Name property, you can specify the desired icon using the IconName enum.

We provide a wide range of icons, and you can select the appropriate one from the enum list. For your convenience, I have included the documentation link below, which outlines the available icons.

Here’s a quick example:

Documentation Reference: Blazor icons library - Syncfusion

MI Mike-E replied to Kundurthi Naga Siddartha Kundurthi Vennela Prasad May 24, 2026 09:16 AM UTC

Hi Kundurthi,

Thank you very much for your reply and apologies for the delay in getting back to you here. I am just now able to look into this.

I looked into your above playground and was able to reproduce the issue with the following markup:

```

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons


<span @onclick:stopPropagation="true" @onclick:preventDefault="true" style="display:inline">
    <SfTooltip Target="@($"#{_identifier}")" Content="@_content" OpensOn="Focus" >
        <span id="@_identifier" tabindex="0" class="circle-icon">
            <SfIcon Name="IconName.Settings" Size="IconSize.Large" CssClass="custom-icon"></SfIcon> 
        </span>
    </SfTooltip>
</span> 

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
<span @onclick:stopPropagation="true" @onclick:preventDefault="true">
    <SfTooltip Target="@($"#{_identifier1}")" Content="@_content1" OpensOn="Focus"  style="display:inline" Position="Syncfusion.Blazor.Popups.Position.BottomCenter">
        <span id="@_identifier1" tabindex="0">
            <SfIcon Name="IconName.Settings" Size="IconSize.Large"></SfIcon>
        </span>
    </SfTooltip>
</span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

@code {
    public string _identifier = "target";
    string _content = "Tooltip";

    public string _identifier1 = "target1";
    string _content1 = "Tooltip1";
}

<style>

</style>
```

You can see that while Position="Syncfusion.Blazor.Popups.Position.BottomCenter"  is assigned to the 2nd tooltip, it still renders on top:

 

Additionally, when I unfocus the window, the tooltip goes away, but when I refocus the window, the tooltip returns.  It is expected that when the window loses focus, the tooltip also loses focus, correct?

https://i.imgur.com/ugwnlfy.gif 

Thank you for your continued assistance,
Michae;

MI Mike-E May 24, 2026 09:26 AM UTC

Also Kundurthi and team, there appears to be a bug when scrolling:

Focus tooltip, it displays (expected)
Scoll window, tool tip hides (expected)
Refocus tooltip -- nothing happens (unexpected)

I have to focus + click elsewhere + refocus the tooltip for it to display again after scrolling.

```

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons


<span @onclick:stopPropagation="true" @onclick:preventDefault="true" style="display:inline">
    <SfTooltip Target="@($"#{_identifier}")" Content="@_content" OpensOn="Focus" >
        <span id="@_identifier" tabindex="0" class="circle-icon">
            <SfIcon Name="IconName.Settings" Size="IconSize.Large" CssClass="custom-icon"></SfIcon> 
        </span>
    </SfTooltip>
</span> 

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
<span @onclick:stopPropagation="true" @onclick:preventDefault="true">
    <SfTooltip Target="@($"#{_identifier1}")" Content="@_content1" OpensOn="Focus"  style="display:inline" Position="Syncfusion.Blazor.Popups.Position.BottomCenter">
        <span id="@_identifier1" tabindex="0">
            <SfIcon Name="IconName.Settings" Size="IconSize.Large"></SfIcon>
        </span>
    </SfTooltip>
</span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


@code {
    public string _identifier = "target";
    string _content = "Tooltip";

    public string _identifier1 = "target1";
    string _content1 = "Tooltip1";
}

<style>

</style>
```

JA Jafar Ali Shahulhameed Syncfusion Team May 25, 2026 11:18 AM UTC

Hi Mike,

We would like to inform you that we have validated your mentioned queries and found a solution to achieve your requirement.

Query: [Improper Tooltip positioning]

Kindly note that the Tooltip position is set to BottomCenter, but it can still auto-adjust due to collision handling. When WindowCollision="false", collision is checked against local or container bounds, so in scrollable layouts the Tooltip may unexpectedly flip to the top. Setting WindowCollision="true" makes collision handling use the browser viewport, which keeps Tooltip placement more consistent.

We suggest you to make use of the Tooltip component WindowCollision property for strict positioning of Tooltip component.

Code Snippet:

<SfTooltip Target="@($"#{_identifier1}")" Content="@_content1" OpensOn="Focus" WindowCollision="true" style="display:inline" Position="Syncfusion.Blazor.Popups.Position.BottomCenter">

</SfTooltip>

GIF:

Refer the below documentations to know more about WindowCollision property,

API reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_WindowCollision

Documentation: https://blazor.syncfusion.com/documentation/tooltip/position#change-collision-target-to-viewport-when-setting-target

Query: [Refocus tooltip -- nothing happens]

Kindly note that tooltip is configured with OpensOn="Focus". After page scroll or window blur, the tooltip UI closes, but the browser can keep the target element in a focused/stale state internally. Since the element is already considered focused, focusing it again may not trigger a fresh focus event, so the tooltip does not reopen until focus is reset (for example, click elsewhere first).

Code snippet:

if (!window.__sfTooltipFocusResetRegistered) {

window.__sfTooltipFocusResetRegistered = true;

const resetFocus = () => {

const el = document.activeElement;

if (el && typeof el.blur === "function") el.blur();

};

window.addEventListener("scroll", resetFocus, true);

window.addEventListener("blur", resetFocus, true);

}

</script>

In the updated sample, the added handlers on window.scroll, window.blur explicitly call document.activeElement.blur(). This resets the stale focus state, so the next time the user focuses the icon, a new focus event is raised and the tooltip opens correctly. It also prevents previously focused tooltip targets from reappearing unexpectedly after window refocus.

GIF:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTreeViewIssue

Kindly checkout the shared details and get back to us if you need further assistance.

Regards,

Jafar Ali S

MI Mike-E May 28, 2026 10:42 AM UTC

Hi Jafar, thank you for your reply it is appreciated.

For the WindowCollision, that does fix the problem, thank you. This seems a little counter-intuitive as the control seems broken until this property is assigned, and seems like it should be defaulted to true, but this is not a problem now that it is fixed.

As for the sample, are you sure you provided the correct one? The one provided seems to have "Hotspot & Tethering" in its title, which does not match the screenshot above.

In either case, it seems your control should manage the element's focus changes and should not have consumers do this for you.

This seems like a bug and something that should be addressed, especially if you already have javascript managing your element.

Thank you for your consideration.

JA Jafar Ali Shahulhameed Syncfusion Team June 2, 2026 12:27 PM UTC

Hi Mike,

Thanks for sharing the details.

[Query: Focus maintenance]

After re-validating, we would like to clarify that this behavior is expected when Tooltip is configured with OpensOn="Focus",

The tooltip opens only when the target moves from blurred state to focused state.
During scroll, the tooltip may close, but the target element can still remain the document’s active element.
Since focusing an already focused element does not raise a new focus event, the tooltip does not reopen immediately.

So in this case, the component is following the standard focus-event lifecycle.

For clearer reference, we have also prepared a simple TextBox-based sample that demonstrates the same behavior pattern.

Tooltip with Textbox sample: https://blazorplayground.syncfusion.com/BDVdXdDVgauCoxnS

We kindly suggest you to utilize the previous suggested solution using the below code changes to achieve the requirement,

Code Snippet:

if (!window.__sfTooltipFocusResetRegistered) {

window.__sfTooltipFocusResetRegistered = true;

const resetFocus = () => {

const el = document.activeElement;

if (el && typeof el.blur === "function") el.blur();

};

window.addEventListener("scroll", resetFocus, true);

window.addEventListener("blur", resetFocus, true);

}

</script>

[Query: WindowCollision property]

WindowCollision is designed to control how Tooltip checks available space before rendering, so content stays visible and does not get clipped.

WindowCollision="false" (default behavior): collision is calculated against the tooltip’s local/container context.

Best for componentized layouts, dialogs, panels, and bounded UI regions.

WindowCollision="true": collision is calculated against the full browser viewport.

Best for long scrolling pages and cases where consistent on-screen placement is needed.

Positives of this design

Prevents tooltip cutoff/clipping.
Supports both container-based and viewport-based layouts.
Gives developers explicit control based on page structure.
Improves usability across responsive and scroll-heavy pages.

So, the property is not a workaround; it is a layout control switch for different rendering contexts.

We have also attached the working sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTooltip

Check out the shared details and get back to us if you need further assistance.

Regards,

Jafar Ali S

MI Mike-E June 4, 2026 07:23 AM UTC

Hi Jafar,

Thank you for your time and thoughtful dialogue, they are greatly appreciated. I am nodding along about the WindowCollision property. I understand, thank you for taking the time for explaining it further.

As for the focus state, I still have concerns here and still feel this is a vendor issue, not a consumer issue. I understand that it's only 10 lines of JavaScript but I feel this is a concern that should be handled by your control.

To start, why does the tooltip hide on scroll? If focus is never truly released, it seems like it should still be displayed, as blur/unfocus never occurs. This seems like a bug or at least there should be a new property defined on your control that determines what occurs when a scroll event happens on the page.

Additionally, consider the following scenario. Using your sample and removing the excess Javascript, I was able to reproduce this visual oddity:

Focus element 1
Unfocus window
Focus element 2

Expected: only element 2 is focused

Actual: both elements are focused

Recording of this seen here:

https://i.imgur.com/Z0mPPFd.gif

Thank you for any consideration toward addressing the above,

Michael

JA Jafar Ali Shahulhameed Syncfusion Team June 8, 2026 03:33 PM UTC

Hi Mike,

Thank you for the clear details. What you are seeing is generally related to browser focus lifecycle for focus-triggered overlays (not unique to one library).

With OpensOn="Focus":

Tooltip opens only when a new focus event occurs.
During scroll, tooltip may close to avoid stale/misaligned popup position.
If the element remains the browser activeElement, clicking it again may not fire a new focus event.
With multiple tooltip instances, blur/refocus transitions can create temporary visual overlap.

So this is a known focus/overlay interaction pattern in web UI, though your UX concern is valid.

We kindly suggest you to use Tooltip component IsSticky property if you want tooltip to remain open until explicit close. Refer the code changes below,

Code Snippet:

</span>

</SfTooltip>

Workflow of the code snippet

OpensOn="Focus" keeps keyboard-focus-based behavior.
IsSticky="true" prevents immediate auto-hide behavior (user dismiss pattern).
WindowCollision="true" improves positioning consistency in scrollable pages.
If strict single-tooltip UX is required, prefer one shared tooltip instance or custom open/close control.

GIF:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tooltip

Refer the below documentation for reference,

IsSticky: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_IsSticky

Kindly check out the shared details and get back to us if you need further assistance.

Regards,

Jafar Ali S

MI Mike-E August 14, 2026 11:05 AM UTC

Hi Jafar,

Thank you for your patience and assistance. Apologies for taking so long to reply I have been developing and testing with your suggested guidance.

Everything seems to work now except for your suggested script:

if (!window.__sfTooltipFocusResetRegistered) {

window.__sfTooltipFocusResetRegistered = true;

const resetFocus = () => {

const el = document.activeElement;

if (el && typeof el.blur === "function") el.blur();

};

window.addEventListener("scroll", resetFocus, true);

window.addEventListener("blur", resetFocus, true);

}

</script>

This closes the SfDropDownList popup it is visible scroll the opened popup. How do we modify the above so that it does not close the SfDropDownList popup?

Thank you for your continued assistance.