From c28c831d6a68695977400373f8c4ad97d322c765 Mon Sep 17 00:00:00 2001 From: georgedautov Date: Mon, 28 Jul 2025 10:12:13 +0300 Subject: [PATCH 1/3] chore(example): Add new kb article combobox-multiselect-conditional-tooltip --- ...ombobox-multiselect-conditional-tooltip.md | 223 ++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 knowledge-base/combobox-multiselect-conditional-tooltip.md diff --git a/knowledge-base/combobox-multiselect-conditional-tooltip.md b/knowledge-base/combobox-multiselect-conditional-tooltip.md new file mode 100644 index 000000000..ec9664e21 --- /dev/null +++ b/knowledge-base/combobox-multiselect-conditional-tooltip.md @@ -0,0 +1,223 @@ +--- +title: Display Conditional Tooltips to ComboBox and MultiSelect for Dynamic Widths +description: Learn how to conditionally display tooltips for TelerikComboBox and TelerikMultiSelect components based on dynamic text overflow. +type: how-to +page_title: Implementing Dynamic Tooltips for ComboBox and MultiSelect in Blazor +slug: combobox-multiselect-kb-conditional-tooltips +position: +tags: blazor, combobox, multiselect, tooltip +ticketid: 1693287 +res_type: kb +--- + +## Environment + + + + + + + + +
Product + ComboBox for Blazor,
+ MultiSelect for Blazor +
+ +## Description + +I want to display tooltips for the [ComboBox](slug:components/combobox/overview) and [MultiSelect](slug:multiselect-overview) components in my Blazor application only when the text is ellipsed due to dynamic widths. If there’s enough space for the text to be fully visible, the tooltip should not appear. + +This knowledge base article also answers the following questions: +- How to show tooltips for ellipsed text in ComboBox and MultiSelect? +- How to use JavaScript to check text overflow in Blazor components? +- How to implement dynamic tooltips based on [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) and [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)? + +## Solution + +To ensure tooltips are displayed only when text is ellipsed, use JavaScript to check whether the element's `scrollWidth` exceeds its `clientWidth`. Below are the steps to implement this functionality for both components: + +### ComboBox Implementation + +1. Add a `` wrapper around the ComboBox component and assign it an id. +2. Use JavaScript to check for text overflow and conditionally set the tooltip target. + +>caption Display a Tooltip for Overflowing ComboBox Items + +```razor +@inject IJSRuntime JS + + + +@if (SelectedHobbyId != 0) +{ + +} + +@{ + + + + +} + +@code { + public int SelectedHobbyId { get; set; } + + private bool IsCurrentOverflowing { get; set; } = false; + private string CurrentHobbyName => FindCurrentHobby()?.HobbyName; + + private async Task OnMouseEnter() { + @if (SelectedHobbyId != 0) { + IsCurrentOverflowing = await JS.InvokeAsync("isTextOverflowing"); + } + } + + public HobbiesDto? FindCurrentHobby() + { + return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId); + } + + public IEnumerable Hobbies { get; set; } = new List() + { + new HobbiesDto(1, "This is a test for a very very very very long sentance."), + new HobbiesDto(2, "This is some long test sentance."), + new HobbiesDto(3, "This is another long test sentance."), + new HobbiesDto(4, "Table Tennis"), + new HobbiesDto(5, "Volleyball"), + new HobbiesDto(6, "Football"), + }; + + public class HobbiesDto + { + public HobbiesDto(int id, string name) + { + HobbyId = id; + HobbyName = name; + } + + public int HobbyId { get; set; } + public string HobbyName { get; set; } + } +} +``` + +### MultiSelect Implementation + +1. Use the `TagTemplate` to customize the display of tags in the MultiSelect. +2. Use JavaScript to determine overflow and set the tooltip. + +>caption Display a Tooltip for Overflowing MultiSelect Items + +```razor +@inject IJSRuntime JS + + + + + + + + + + + @{ + int? itemTitle = IsItemOverflowing ? context.HobbyId : null; + } + + @context.HobbyName + + + + + +@code { + private async Task OnHoverHandler(int id) + { + IsItemOverflowing = await JS.InvokeAsync("isTextOverflowing", $"item {id}"); + } + + private bool IsItemOverflowing { get; set; } + private List SelectedHobbyIds { get; set; } + private IEnumerable Hobbies { get; set; } = new List() + { + new HobbiesDto(1, "This is a test for a very very very very long sentance."), + new HobbiesDto(2, "Some long test sentance."), + new HobbiesDto(3, "Some very very very long test sentance."), + new HobbiesDto(4, "Table Tennis"), + new HobbiesDto(5, "Volleyball"), + new HobbiesDto(6, "Football"), + }; + + public class HobbiesDto + { + public int HobbyId { get; set; } + public string HobbyName { get; set; } + + public HobbiesDto(int id, string name) + { + HobbyId = id; + HobbyName = name; + } + } +} +``` + +### Notes + +- Move custom JavaScript functions to your static assets directory in production. +- Ensure the tooltip `TargetSelector` only matches elements with overflow. + +## See Also + +- [ComboBox Overview](slug:components/combobox/overview) +- [MultiSelect Overview](slug:multiselect-overview) +- [Tooltip Configuration](slug:tooltip-overview) +- [JavaScript scrollWidth Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth) +- [JavaScript clientWidth Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) \ No newline at end of file From 6fde297a8928dcb7c4f7938fe14c83d74e7d8bdd Mon Sep 17 00:00:00 2001 From: George Dautov Date: Tue, 2 Sep 2025 13:20:11 +0300 Subject: [PATCH 2/3] Update knowledge-base/combobox-multiselect-conditional-tooltip.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/combobox-multiselect-conditional-tooltip.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/combobox-multiselect-conditional-tooltip.md b/knowledge-base/combobox-multiselect-conditional-tooltip.md index ec9664e21..5b056999a 100644 --- a/knowledge-base/combobox-multiselect-conditional-tooltip.md +++ b/knowledge-base/combobox-multiselect-conditional-tooltip.md @@ -4,7 +4,6 @@ description: Learn how to conditionally display tooltips for TelerikComboBox and type: how-to page_title: Implementing Dynamic Tooltips for ComboBox and MultiSelect in Blazor slug: combobox-multiselect-kb-conditional-tooltips -position: tags: blazor, combobox, multiselect, tooltip ticketid: 1693287 res_type: kb From 2b2e1a784bf307d5055a5146540340d07f2f6514 Mon Sep 17 00:00:00 2001 From: George Dautov Date: Tue, 2 Sep 2025 13:27:27 +0300 Subject: [PATCH 3/3] Update knowledge-base/combobox-multiselect-conditional-tooltip.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- ...ombobox-multiselect-conditional-tooltip.md | 117 +++++++++--------- 1 file changed, 61 insertions(+), 56 deletions(-) diff --git a/knowledge-base/combobox-multiselect-conditional-tooltip.md b/knowledge-base/combobox-multiselect-conditional-tooltip.md index 5b056999a..013e10c4f 100644 --- a/knowledge-base/combobox-multiselect-conditional-tooltip.md +++ b/knowledge-base/combobox-multiselect-conditional-tooltip.md @@ -46,57 +46,46 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c ```razor @inject IJSRuntime JS - - @if (SelectedHobbyId != 0) { - + } @{ - + + Data="@Hobbies" + Placeholder="Select your favourite sport..." + TextField="@nameof(HobbiesDto.HobbyName)" + ValueField="@nameof(HobbiesDto.HobbyId)" + Filterable="true" + Width="20%" + Class="example-cb"> } -@code { - public int SelectedHobbyId { get; set; } +@* suppress-error allows script tags inside Razor components. + Move the script to an external file in production apps. *@ + +@code { + private int SelectedHobbyId { get; set; } private bool IsCurrentOverflowing { get; set; } = false; private string CurrentHobbyName => FindCurrentHobby()?.HobbyName; - private async Task OnMouseEnter() { - @if (SelectedHobbyId != 0) { - IsCurrentOverflowing = await JS.InvokeAsync("isTextOverflowing"); - } - } - - public HobbiesDto? FindCurrentHobby() - { - return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId); - } - - public IEnumerable Hobbies { get; set; } = new List() + private IEnumerable Hobbies { get; set; } = new List() { new HobbiesDto(1, "This is a test for a very very very very long sentance."), new HobbiesDto(2, "This is some long test sentance."), @@ -106,6 +95,19 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c new HobbiesDto(6, "Football"), }; + private async Task OnMouseEnter() + { + @if (SelectedHobbyId != 0) + { + IsCurrentOverflowing = await JS.InvokeAsync("isTextOverflowing"); + } + } + + private HobbiesDto? FindCurrentHobby() + { + return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId); + } + public class HobbiesDto { public HobbiesDto(int id, string name) @@ -122,7 +124,7 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c ### MultiSelect Implementation -1. Use the `TagTemplate` to customize the display of tags in the MultiSelect. +1. Use the [`TagTemplate`](slug:multiselect-templates#tag-template) to customize the display of tags in the MultiSelect. 2. Use JavaScript to determine overflow and set the tooltip. >caption Display a Tooltip for Overflowing MultiSelect Items @@ -130,17 +132,6 @@ To ensure tooltips are displayed only when text is ellipsed, use JavaScript to c ```razor @inject IJSRuntime JS - -