diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md new file mode 100644 index 000000000..312eccb75 --- /dev/null +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -0,0 +1,84 @@ +--- +title: Adding Tooltips for Chips in a ChipList +description: Learn how to display tooltips for chips in the Telerik Blazor ChipList component. +type: how-to +page_title: How to Display Tooltips for Chips in Telerik Blazor ChipList +meta_title: How to Display Tooltips for Chips in Telerik Blazor ChipList +slug: add-tooltips-chips-chiplist +tags: blazor, chiplist, tooltip, itemtemplate +res_type: kb +ticketid: 1691888 +--- + +## Environment + + + + + + + + +
ProductTelerik UI for Blazor ChipList
+ +## Description + +You can display additional information for each chip in the [ChipList](slug:chiplist-overview) 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** + +```razor + + +
+ + @context.Text +
+
+
+ + + +@code { + private List ChipListSource { get; set; } = new List + { + 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](slug:chiplist-overview) +- [ChipList Templates](slug:chiplist-templates#item-template) +- [Tooltip Overview](slug:tooltip-overview) \ No newline at end of file