Make tooltip not disappear when user hovers over the tooltip itself.

[Eli]

Say I have a tooltip like this where the user is meant to click on a link in the tooltip. 

<div class="container mt-4">

    <SfTooltip Target="#test" OpensOn="Hover">

        <TooltipTemplates>

            <Content>

                <a rel='nofollow' href="http://www.example.com/">link to somewhere</a>

            </Content>

        </TooltipTemplates>

        <span id="test">This has a tooltip</span>

    </SfTooltip>

</div>

Currently, if the user tries to hover over the link and try to click it, the tooltip fades away. This makes it very hard to click the link. How can I make it so that if the user is hovering over the tooltip itself, instead of the target element, the tooltip doesn't fade?

[Indhumathy Loganathan]

Hi Eli, 

 

Greetings from Syncfusion support. 

 

We have checked your requirement in Blazor Tooltip. Tooltip hovering includes content interactions. If you move the mouse over the content area of the Tooltip, the tooltip doesn’t fade. Please refer to the video footage from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/161084/ze/TooltipVideo1271933381.zip 

 

Else, you can use the Tooltip IsSticky property to display the Tooltip in an open state until it is closed manually. 

 

Please find the below modified code block. 

 

 

@using Syncfusion.Blazor.Popups; 

 

<div class="container mt-4"> 

    <SfTooltip Target="#test" OpensOn="Hover" IsSticky="true"> 

        <TooltipTemplates> 

            <Content> 

                <a rel='nofollow' rel='nofollow' href="http://www.example.com/">link to somewhere</a> 

            </Content> 

        </TooltipTemplates> 

        <span id="test">This has a tooltip</span> 

    </SfTooltip> 

</div> 

 

Please refer the following links to know more about the Blazor Tooltip component. 

 

Documentation: https://blazor.syncfusion.com/documentation/tooltip/getting-started/ 

 

Demos: https://blazor.syncfusion.com/demos/tooltip/default?theme=bootstrap4 

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Eli]

Ah, my issue was that it was rather difficult to hover over a tooltip if the user didn't move either fast or precise enough. It can be made much easier to hover over the tooltip by adding a "CloseDelay ="100"" to the tool tip.

Thanks for the help

[Indhumathy Loganathan]

Hi Eli, 

 

Sorry for the inconvenience. 

 

We have modified the sample as per your request. The Tooltip CloseDelay property closes the tooltip after a specified delay in millisecond. So, you can perform content interactions easily based on your requirement. 

 

Please find the modified code block and sample. 

 

 

@using Syncfusion.Blazor.Popups; 

 

<div class="container mt-4"> 

    <SfTooltip Target="#test" OpensOn="Hover" CloseDelay="1000"> 

        <TooltipTemplates> 

            <Content> 

                <a rel='nofollow' rel='nofollow' href="http://www.example.com/">link to somewhere</a> 

            </Content> 

        </TooltipTemplates> 

        <span id="test">This has a tooltip</span> 

    </SfTooltip> 

</div> 

 

Modified Sample: https://www.syncfusion.com/downloads/support/forum/161084/ze/Tooltip-962684938.zip 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Indhumathy L