Skip to content

Commit f13e9e7

Browse files
github-actions[bot]georgedautovTsvetomir-Hr
authored
Merge combobox-multiselect-tooltip-kb-example-3133 into production (#3216)
* chore(example): Add new kb article combobox-multiselect-conditional-tooltip * Update knowledge-base/combobox-multiselect-conditional-tooltip.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update knowledge-base/combobox-multiselect-conditional-tooltip.md Co-authored-by: Tsvetomir Hristov <[email protected]> --------- Co-authored-by: georgedautov <[email protected]> Co-authored-by: Tsvetomir Hristov <[email protected]>
1 parent 6530e32 commit f13e9e7

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed

‎knowledge-base/combobox-multiselect-conditional-tooltip.md‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
---
2+
title: Display Conditional Tooltips to ComboBox and MultiSelect for Dynamic Widths
3+
description: Learn how to conditionally display tooltips for TelerikComboBox and TelerikMultiSelect components based on dynamic text overflow.
4+
type: how-to
5+
page_title: Implementing Dynamic Tooltips for ComboBox and MultiSelect in Blazor
6+
slug: combobox-multiselect-kb-conditional-tooltips
7+
tags: blazor, combobox, multiselect, tooltip
8+
ticketid: 1693287
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td>
19+
ComboBox for Blazor, <br/>
20+
MultiSelect for Blazor
21+
</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
28+
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.
29+
30+
This knowledge base article also answers the following questions:
31+
- How to show tooltips for ellipsed text in ComboBox and MultiSelect?
32+
- How to use JavaScript to check text overflow in Blazor components?
33+
- 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)?
34+
35+
## Solution
36+
37+
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:
38+
39+
### ComboBox Implementation
40+
41+
1. Add a `<span>` wrapper around the ComboBox component and assign it an id.
42+
2. Use JavaScript to check for text overflow and conditionally set the tooltip target.
43+
44+
>caption Display a Tooltip for Overflowing ComboBox Items
45+
46+
```razor
47+
@inject IJSRuntime JS
48+
49+
@if (SelectedHobbyId != 0)
50+
{
51+
<TelerikTooltip TargetSelector="#products-multiselect[title]" />
52+
}
53+
54+
@{
55+
<span id="@(IsCurrentOverflowing ? "products-multiselect" : "products-multiselect-none")"
56+
@onmouseenter="OnMouseEnter"
57+
title="@CurrentHobbyName">
58+
<TelerikComboBox @bind-Value="@SelectedHobbyId"
59+
Data="@Hobbies"
60+
Placeholder="Select your favourite sport..."
61+
TextField="@nameof(HobbiesDto.HobbyName)"
62+
ValueField="@nameof(HobbiesDto.HobbyId)"
63+
Filterable="true"
64+
Width="20%"
65+
Class="example-cb">
66+
</TelerikComboBox>
67+
</span>
68+
}
69+
70+
@* suppress-error allows script tags inside Razor components.
71+
Move the script to an external file in production apps. *@
72+
<script suppress-error="BL9992">
73+
window.isTextOverflowing = () => {
74+
const el = document.querySelector('.example-cb .k-input-inner');
75+
if (!el) {
76+
return;
77+
}
78+
79+
return el.scrollWidth > el.clientWidth;
80+
};
81+
</script>
82+
83+
@code {
84+
private int SelectedHobbyId { get; set; }
85+
private bool IsCurrentOverflowing { get; set; } = false;
86+
private string CurrentHobbyName => FindCurrentHobby()?.HobbyName;
87+
88+
private IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
89+
{
90+
new HobbiesDto(1, "This is a test for a very very very very long sentance."),
91+
new HobbiesDto(2, "This is some long test sentance."),
92+
new HobbiesDto(3, "This is another long test sentance."),
93+
new HobbiesDto(4, "Table Tennis"),
94+
new HobbiesDto(5, "Volleyball"),
95+
new HobbiesDto(6, "Football"),
96+
};
97+
98+
private async Task OnMouseEnter()
99+
{
100+
@if (SelectedHobbyId != 0)
101+
{
102+
IsCurrentOverflowing = await JS.InvokeAsync<bool>("isTextOverflowing");
103+
}
104+
}
105+
106+
private HobbiesDto? FindCurrentHobby()
107+
{
108+
return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId);
109+
}
110+
111+
public class HobbiesDto
112+
{
113+
public HobbiesDto(int id, string name)
114+
{
115+
HobbyId = id;
116+
HobbyName = name;
117+
}
118+
119+
public int HobbyId { get; set; }
120+
public string HobbyName { get; set; }
121+
}
122+
}
123+
```
124+
125+
### MultiSelect Implementation
126+
127+
1. Use the [`TagTemplate`](slug:multiselect-templates#tag-template) to customize the display of tags in the MultiSelect.
128+
2. Use JavaScript to determine overflow and set the tooltip.
129+
130+
>caption Display a Tooltip for Overflowing MultiSelect Items
131+
132+
```razor
133+
@inject IJSRuntime JS
134+
135+
<TelerikTooltip TargetSelector=".example-ms .k-chip-label[title]">
136+
<Template>
137+
@{
138+
var title = context.Title;
139+
var hobby = Hobbies.FirstOrDefault(x => x.HobbyId == Convert.ToInt32(title));
140+
<div>
141+
@(hobby?.HobbyName)
142+
</div>
143+
}
144+
</Template>
145+
</TelerikTooltip>
146+
147+
<TelerikMultiSelect Data="@Hobbies"
148+
Class="example-ms"
149+
@bind-Value="@SelectedHobbyIds"
150+
ValueField="@nameof(HobbiesDto.HobbyId)"
151+
TextField="@nameof(HobbiesDto.HobbyName)"
152+
Placeholder="Select your favourite sport..."
153+
Id="products-multiselect" Width="300px">
154+
<TagTemplate>
155+
<span class="k-chip-content">
156+
@{
157+
int? itemTitle = IsItemOverflowing ? context.HobbyId : null;
158+
}
159+
<span
160+
class="k-chip-label"
161+
@onmouseenter="() => OnHoverHandler(context.HobbyId)"
162+
id="item @context.HobbyId"
163+
title="@itemTitle">
164+
@context.HobbyName
165+
</span>
166+
</span>
167+
</TagTemplate>
168+
</TelerikMultiSelect>
169+
170+
@* suppress-error allows script tags inside Razor components.
171+
Move the script to an external file in production apps. *@
172+
<script suppress-error="BL9992">
173+
window.isTextOverflowing = (id) => {
174+
const el = document.getElementById(id);
175+
if (!el) {
176+
return false;
177+
}
178+
179+
return el.scrollWidth > el.clientWidth;
180+
};
181+
</script>
182+
183+
@code {
184+
private bool IsItemOverflowing { get; set; }
185+
private List<int> SelectedHobbyIds { get; set; }
186+
187+
private IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
188+
{
189+
new HobbiesDto(1, "This is a test for a very very very very long sentance."),
190+
new HobbiesDto(2, "Some long test sentance."),
191+
new HobbiesDto(3, "Some very very very long test sentance."),
192+
new HobbiesDto(4, "Table Tennis"),
193+
new HobbiesDto(5, "Volleyball"),
194+
new HobbiesDto(6, "Football"),
195+
};
196+
197+
private async Task OnHoverHandler(int id)
198+
{
199+
IsItemOverflowing = await JS.InvokeAsync<bool>("isTextOverflowing", $"item {id}");
200+
}
201+
202+
public class HobbiesDto
203+
{
204+
public int HobbyId { get; set; }
205+
public string HobbyName { get; set; }
206+
207+
public HobbiesDto(int id, string name)
208+
{
209+
HobbyId = id;
210+
HobbyName = name;
211+
}
212+
}
213+
}
214+
```
215+
216+
### Notes
217+
218+
- Move custom JavaScript functions to your static assets directory in production.
219+
- Ensure the tooltip `TargetSelector` only matches elements with overflow.
220+
221+
## See Also
222+
223+
- [ComboBox Overview](slug:components/combobox/overview)
224+
- [MultiSelect Overview](slug:multiselect-overview)
225+
- [Tooltip Overview](slug:tooltip-overview)
226+
- [JavaScript scrollWidth Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
227+
- [JavaScript clientWidth Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)

0 commit comments

Comments
 (0)