Skip to content

chore(example): Add new kb article combobox-multiselect-conditional-t… #3133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 223 additions & 0 deletions knowledge-base/combobox-multiselect-conditional-tooltip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
---
title: 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: combobox, multiselect, tooltip, dynamic-width, blazor
ticketid: 1693287
res_type: kb
---

## Environment

<table>
<tbody>
<tr>
<td> Product </td>
<td>
ComboBox for Blazor, <br/>
MultiSelect for Blazor
</td>
</tr>
</tbody>
</table>

## Description

I want to display tooltips for the [ComboBox](https://docs.telerik.com/blazor-ui/components/combobox/overview) and [MultiSelect](https://docs.telerik.com/blazor-ui/components/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 and 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 `<span>` wrapper around the ComboBox component and assign it an id.
2. Use JavaScript to check for text overflow and conditionally set the tooltip target.

Here is an example:

```razor
@inject IJSRuntime JS

<script suppress-error="BL9992">
window.isTextOverflowing = () => {
const el = document.querySelector('.example-cb .k-input-inner');
if (!el) {
return;
}

return el.scrollWidth > el.clientWidth;
};
</script>

@if (SelectedHobbyId != 0)
{
<TelerikTooltip TargetSelector="#products-multiselect[title]"/>
}

@{
<span
id="@(IsCurrentOverflowing ? "products-multiselect" : "products-multiselect-none")"
@onmouseenter="OnMouseEnter"
title="@CurrentHobbyName">
<TelerikComboBox @bind-Value="@SelectedHobbyId"
Data="@Hobbies"
Placeholder="Select your favourite sport..."
TextField="@nameof(HobbiesDto.HobbyName)"
ValueField="@nameof(HobbiesDto.HobbyId)"
Filterable="true"
Width="20%"
Class="example-cb">
</TelerikComboBox>
</span>
}

@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<bool>("isTextOverflowing");
}
}

public HobbiesDto? FindCurrentHobby()
{
return Hobbies.FirstOrDefault(x => x.HobbyId == SelectedHobbyId);
}

public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
{
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.

Example implementation:

```razor
@inject IJSRuntime JS

<script suppress-error="BL9992">
window.isTextOverflowing = (id) => {
const el = document.getElementById(id);
if (!el) {
return false;
}

return el.scrollWidth > el.clientWidth;
};
</script>

<TelerikTooltip TargetSelector=".example-ms .k-chip-label[title]">
<Template>
@{
var title = context.Title;
var hobby = Hobbies.FirstOrDefault(x => x.HobbyId == Convert.ToInt32(title));
<div>
@(hobby?.HobbyName)
</div>
}
</Template>
</TelerikTooltip>

<TelerikMultiSelect Data="@Hobbies"
Class="example-ms"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="products-multiselect" Width="300px">
<TagTemplate>
<span class="k-chip-content">
@{
int? itemTitle = IsItemOverflowing ? context.HobbyId : null;
}
<span
class="k-chip-label"
@onmouseenter="() => OnHoverHandler(context.HobbyId)"
id="item @context.HobbyId"
title="@title">
@context.HobbyName
</span>
</span>
</TagTemplate>
</TelerikMultiSelect>

@code {
private async Task OnHoverHandler(int id)
{
IsItemOverflowing = await JS.InvokeAsync<bool>("isTextOverflowing", $"item {id}");
}

private bool IsItemOverflowing { get; set; }
private List<int> SelectedHobbyIds { get; set; }
private IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
{
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](https://docs.telerik.com/blazor-ui/components/combobox/overview)
- [MultiSelect Overview](https://docs.telerik.com/blazor-ui/components/multiselect/overview)
- [Tooltip Configuration](https://docs.telerik.com/blazor-ui/components/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)