Display Tooltip for Each Chip in a Telerik ChipList

Environment

Product

Telerik UI for Blazor ChipList

Description

You can display additional information for each chip in the ChipList by showing a Tooltip. This approach helps you keep the chip text concise while providing more details on hover.

This article answers the following questions:

• How do you show extra details for chips in a ChipList?
• Can you display a TelerikTooltip for each chip in the ChipList?
• How do you use ItemTemplate in Telerik Blazor ChipList?

Solution

To add tooltips to chips in the ChipList, use the ItemTemplate to customize chip rendering and set a tooltip for each chip. Follow these steps:

1. Add a Description property to the model used for the ChipList.
2. Use the ItemTemplate to render each chip and set the title attribute for a native tooltip.
3. Optionally, use the TelerikTooltip component for enhanced tooltip appearance and behavior.

Example: Displaying Tooltips for Chips

<TelerikChipList Data="@ChipListSource">
    <ItemTemplate>
        <div title="@context.Description" class="chip-description">
            <TelerikSvgIcon Icon="@context.Icon"></TelerikSvgIcon>
            @context.Text
        </div>
    </ItemTemplate>
</TelerikChipList>

<TelerikTooltip TargetSelector=".chip-description" />

@code {
    private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>
    {
        new ChipModel
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio,
            Description = "Audio file chip."
        },
        new ChipModel
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo,
            Description = "Video file chip."
        }
    };

    public class ChipModel
    {
        public string Text { get; set; }
        public ISvgIcon? Icon { get; set; }
        public string Description { get; set; }
    }
}

See Also

• ChipList Overview
• ChipList Templates
• Tooltip Overview