From 4fd5126c40589ae8ab936e34b6f34e2d96426f75 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 1/7] 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 + + + + + + + + +
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 From 9a9acbbfbf0be0e8aced359fffc095c2fa19d0a1 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:18:08 +0300 Subject: [PATCH 2/7] Update knowledge-base/chiplist-add-chip-tooltips.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chiplist-add-chip-tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index 312eccb75..594f04e65 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -4,7 +4,7 @@ description: Learn how to display tooltips for chips in the Telerik Blazor ChipL 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 +slug: chiplist-kb-add-chip-tooltips tags: blazor, chiplist, tooltip, itemtemplate res_type: kb ticketid: 1691888 From eb0f8be11dd5bad10e015992d522f925a32dd285 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:18:30 +0300 Subject: [PATCH 3/7] Update knowledge-base/chiplist-add-chip-tooltips.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chiplist-add-chip-tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index 594f04e65..eb9fc5364 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -23,7 +23,7 @@ ticketid: 1691888 ## 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. +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? From a5377ce19fcfa209caf5bfe666beb94881c4a6d3 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:18:57 +0300 Subject: [PATCH 4/7] Update knowledge-base/chiplist-add-chip-tooltips.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chiplist-add-chip-tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index eb9fc5364..8ba970b6c 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -72,7 +72,7 @@ To add tooltips to chips in the ChipList, use the `ItemTemplate` to customize ch public class ChipModel { public string Text { get; set; } - public ISvgIcon Icon { get; set; } + public object? Icon { get; set; } public string Description { get; set; } } } From 561b5fe8e870eef63e5a6ac65549b78417213d63 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:19:04 +0300 Subject: [PATCH 5/7] Update knowledge-base/chiplist-add-chip-tooltips.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/chiplist-add-chip-tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index 8ba970b6c..e90deb5fb 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -5,7 +5,7 @@ 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: chiplist-kb-add-chip-tooltips -tags: blazor, chiplist, tooltip, itemtemplate +tags: blazor, chiplist, tooltip, template res_type: kb ticketid: 1691888 --- From 0f70e3fcb51b0a8b57463bfcaf0604e36428e8d7 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:24:37 +0300 Subject: [PATCH 6/7] chore(Kb): polish article and add reference to chiplist templates --- knowledge-base/chiplist-add-chip-tooltips.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index e90deb5fb..1194cb4d8 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -1,5 +1,5 @@ --- -title: Adding Tooltips for Chips in a ChipList +title: Display Tooltip for Each Chip in a Telerik 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 @@ -28,7 +28,7 @@ You can display additional information for each chip in the [ChipList](slug:chip 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? +- How do you use [`ItemTemplate`](slug:chiplist-templates) in Telerik Blazor ChipList? ## Solution From 4a70272fcea17437a041c1afefff683b2aa80a7a Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:52:19 +0300 Subject: [PATCH 7/7] chore(KB): update icon declaration --- knowledge-base/chiplist-add-chip-tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md index 1194cb4d8..0b075650d 100644 --- a/knowledge-base/chiplist-add-chip-tooltips.md +++ b/knowledge-base/chiplist-add-chip-tooltips.md @@ -72,7 +72,7 @@ To add tooltips to chips in the ChipList, use the `ItemTemplate` to customize ch public class ChipModel { public string Text { get; set; } - public object? Icon { get; set; } + public ISvgIcon? Icon { get; set; } public string Description { get; set; } } }