From 6f9727c83c532a752f0f6fafc45f294de8f0bab4 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 2 Jul 2025 16:50:13 +0300
Subject: [PATCH] chore(Kb): kb for add tooltip to each chip in chiplist

---
 knowledge-base/chiplist-add-chip-tooltips.md | 84 ++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 knowledge-base/chiplist-add-chip-tooltips.md

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
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Telerik UI for Blazor ChipList</td>
+        </tr>
+    </tbody>
+</table>
+
+## 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
+<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](slug:chiplist-overview)
+- [ChipList Templates](slug:chiplist-templates#item-template)
+- [Tooltip Overview](slug:tooltip-overview)
\ No newline at end of file