How to displaying tooltips on popup items in AutoComplete with Syncfusion Blazor?

This article provides a guide on how to add tooltips to each element within a Syncfusion Blazor AutoComplete component. Tooltips can be useful for providing additional information about the items in the AutoComplete list.

Adding Tooltips to AutoComplete Popup Items

To add tooltips to the elements of an AutoComplete component, follow the steps below:

1. Include the necessary namespaces for the Dropdowns and Popups components:

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Popups;

2. Define the Tooltip component and specify the dropdown items to the target elements:

<SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-list-item .name[title]">
</SfTooltip>

3. Create the AutoComplete component and set up the data source:

<SfAutoComplete TItem="GameFields" TValue="string" Placeholder="Select a game" DataSource="@Games">
    <AutoCompleteFieldSettings Text="Text" Value="ID"></AutoCompleteFieldSettings>
    <AutoCompleteTemplates TItem="GameFields">
        <ItemTemplate>
            <div class="name" title="@((context as GameFields).Text)"> @((context as GameFields).Text) </div>
        </ItemTemplate>
    </AutoCompleteTemplates>
    <AutoCompleteEvents TValue="string" TItem="GameFields" Opened="OnOpen" OnClose="OnClose"></AutoCompleteEvents>
</SfAutoComplete>

4. Define the code block with the necessary classes and methods:

@code {

    SfTooltip TooltipObj;
    public Boolean isOpen { get; set; } = false;

    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10", Text= "Tennis"},
    };

    public void OnOpen(PopupEventArgs args)
    {
        isOpen = true;
    }

    public void OnClose(PopupEventArgs args)
    {
        TooltipObj.CloseAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (isOpen)
        {
            await TooltipObj.RefreshAsync();
        }
    }
}

5. Ensure that the TooltipObj is refreshed when the AutoComplete list is opened to display the tooltips correctly.

Additional References

For more information on implementing and customizing tooltips and AutoComplete components, refer to the following documentation:

• Syncfusion Blazor Tooltip Getting Started
• Syncfusion Blazor Autocomplete Events - Opened
• Syncfusion Blazor Autocomplete Events - OnClose
• Syncfusion Blazor Popups Tooltip.RefreshAsync Method

To see a working example, download the sample project from the link below:

• Autocomplete Tooltip Sample

Conclusion

We hope you enjoyed learning about how to displaying tooltips on popup items in Syncfusion Blazor AutoComplete.

You can refer to our Blazor AutoComplete feature tour page to know about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Autocomplete example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor AutoComplete and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!