Skip to content
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.

Sign up for GitHub

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

Merge new-kb-tooltip-show-on-disabled-element-de63f4dce202465b9543de8480d6667f-2607 into production #2614

Merged
merged 2 commits into from
Dec 6, 2024
Merged

Merge new-kb-tooltip-show-on-disabled-element-de63f4dce202465b9543de8480d6667f-2607 into production #2614

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91bc518
Added new kb article tooltip-show-on-disabled-element
Dec 4, 2024
c2954e9
chore: apply suggested changes
Tsvetomir-Hr Dec 6, 2024
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
58 changes: 58 additions & 0 deletions knowledge-base/tooltip-show-on-disabled-element.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: Display Tooltip on Disabled HTML Element
description: Learn how to show a Tooltip for a disabled element by wrapping it with another HTML element in Blazor applications.
type: how-to
page_title: How to Display Tooltip on Disabled HTML Element
slug: tooltip-kb-disabled-element
tags: tooltip, disabled element
res_type: kb
ticketid: 1665023
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>Tooltip for Blazor</td>
</tr>
</tbody>
</table>

## Description

When an HTML element is disabled, providing additional information via a Tooltip can be challenging since disabled elements do not respond to mouse events. Hence, the Tooltip cannot detect when the user hovers over a disabled element.

This knowledge base article also answers the following questions:
- How can I display a tooltip over a disabled HTML element in Blazor?
- How to display a tooltip over a disabled button?
- What is the workaround for showing tooltips on disabled elements in Blazor?
- Can a tooltip be associated with a disabled element in Blazor applications?

## Solution

To display a Tooltip for a disabled button, wrap the disabled button within another HTML element, like a `<div>`, and then set the Tooltip to target this wrapper element. This approach allows the Tooltip to be activated when the user hovers over the area covering the disabled button.

Here's an example demonstrating how to implement this solution:

CSHTML````
<div class="disabled-button" style="width: fit-content;">
<TelerikButton Enabled="false">Hover me</TelerikButton>
</div>

<TelerikTooltip TargetSelector=".disabled-button">
<Template>
@{
<h6>
<strong>Disabled button</strong>
</h6>
}
</Template>
</TelerikTooltip>
````

## See Also

- [Tooltip Component Overview]({%slug tooltip-overview%})
- [Button Component Overview]({%slug components/button/overview%})
Loading