SfTextbox with Icon and alternate text (mouse hover)

Question

Please provide an example of a textbox with a icon on the right and an hover-text when moving over the icon (so that we can show up some information what this icon is going to do).Cheers,Volker

Priyanka Karthikeyan · Answer

Hi Volker,

We have created a sample based on the information you provided. In the code below, we have utilized the AddIconAsync method to append the date icon to the textbox, and we have incorporated a tooltip that appears when the icon is hovered over. Please find the code snippet and the attached sample for your reference

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Popups

</SfTooltip>

@code {

SfTooltip TooltipObj;

SfTextBox TextBoxDateObj;

public async Task OnCreateDate()

{

await TextBoxDateObj.AddIconAsync("append", "e-date-icon" );

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

await TooltipObj.RefreshAsync();

}

<style>

.e-date-icon::before {

content: '\e901';

font-family: e-icons;

}

</style>

Sample: https://blazorplayground.syncfusion.com/hXVKWDKWplboABuU

Documentation Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__

https://blazor.syncfusion.com/documentation/textbox/events#created

https://blazor.syncfusion.com/documentation/tooltip/content

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

Regards,

Priyanka K

Volker · Answer

thank you very much, you guys and girls  are greatGreetings from Graz, AustriaVolker

Priyanka Karthikeyan · Answer

Hi Volker,Thank you for the update. Please get back to us if you need any further assistance.Regards,Priyanka K