How to setup Tooltip only on Textbox Icon hover

[Harryi]

Hi,

I would like to know if I can setup a tooltip to show only when hovered against a textbox icon? I was able to generate the tooltip when I hover over the Icon but it also shows when I hover on the textbox. Please see the code below I have used to implement this.

<SfTooltip ID="Tooltip" @ref="sttMobile" Content="@Value" Position="Position.BottomRight"> <SfTextBox @ref="sftPrefferredContactIconMobile" ID="Mobile" @bind-Value="@User.Mobile" Created="@PrefferedContactIconForMobile">
</SfTextBox>
</SfTooltip>

@code{
SfTextBox sftPrefferredContactIconMobile;
SfTooltip sttMobile;


private string Value { get; set; } = default!;

public async Task PrefferedContactIconForMobile()
{
var touchHover = EventCallback.Factory.Create<MouseEventArgs>(this, touchIconMouseHover);
await sftPrefferredContactIconMobile.AddIcon("append", "e-icons e-radio-button", new Dictionary<string, object>() { { "onmouseover", touchHover }});
}


public void touchIconMouseHover()
        {
            Value = "Preferred method of contact";
        }
}

[Vinitha Jeyakumar]

Hi Harryi,

You can use the Target property of the Tooltip control to specify the target element. please check the code below,

Code snippet:

<SfTooltip OnOpen="open" Target=".e-icons.e-radio-button"  ID="Tooltip" @ref="sttMobile" Content="Showing tooltip" Position="Position.BottomRight">

    <SfTextBox @ref="sftPrefferredContactIconMobile" ID="Mobile"  Created="@PrefferedContactIconForMobile">

    </SfTextBox>

</SfTooltip>

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

Regards,

Vinitha

[Harryi]

Woah, worked like a charm. Thanks a bunch!

[Sureshkumar P]

Hi Harryi, 

 

Thanks for your update. 

 

Regards, 

Sureshkumar P