Skip to content

Added new kb article tooltip-show-on-disabled-element #2607

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

Merged
merged 2 commits into from
Dec 6, 2024
Merged

Added new kb article tooltip-show-on-disabled-element #2607

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1255ee4
Added new kb article tooltip-show-on-disabled-element
Dec 4, 2024
afe7416
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: Displaying Tooltip on Disabled HTML Element
description: Learn how to show a tooltip for a disabled element by wrapping it with an HTML element in Blazor applications.
type: how-to
page_title: How to Displaying 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