From 91bc5189efb53ba5d2d08234a23e6def5107018f Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Wed, 4 Dec 2024 13:21:04 +0000
Subject: [PATCH 1/2] Added new kb article tooltip-show-on-disabled-element

---
 .../tooltip-show-on-disabled-element.md       | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 knowledge-base/tooltip-show-on-disabled-element.md

diff --git a/knowledge-base/tooltip-show-on-disabled-element.md b/knowledge-base/tooltip-show-on-disabled-element.md
new file mode 100644
index 0000000000..243f103257
--- /dev/null
+++ b/knowledge-base/tooltip-show-on-disabled-element.md
@@ -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%})

From c2954e966c1ec9b9fd94dee1bd096f50e1f26f4e Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:06:55 +0200
Subject: [PATCH 2/2] chore: apply suggested changes

---
 knowledge-base/tooltip-show-on-disabled-element.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/knowledge-base/tooltip-show-on-disabled-element.md b/knowledge-base/tooltip-show-on-disabled-element.md
index 243f103257..c40f954cae 100644
--- a/knowledge-base/tooltip-show-on-disabled-element.md
+++ b/knowledge-base/tooltip-show-on-disabled-element.md
@@ -1,8 +1,8 @@
 ---
-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.
+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 Displaying Tooltip on Disabled HTML Element
+page_title: How to Display Tooltip on Disabled HTML Element
 slug: tooltip-kb-disabled-element
 tags: tooltip, disabled element
 res_type: kb