From c75e6119c83667b2ae394e2c93c49805234fa54b Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 28 Feb 2025 16:58:58 +0000 Subject: [PATCH 1/2] Added new kb article tooltip-display-disabled-context-menu-items --- ...tip-display-disabled-context-menu-items.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 knowledge-base/tooltip-display-disabled-context-menu-items.md diff --git a/knowledge-base/tooltip-display-disabled-context-menu-items.md b/knowledge-base/tooltip-display-disabled-context-menu-items.md new file mode 100644 index 000000000..493d54223 --- /dev/null +++ b/knowledge-base/tooltip-display-disabled-context-menu-items.md @@ -0,0 +1,121 @@ +--- +title: Display Tooltips on Disabled Context Menu Items +description: Learn how to show tooltips over menu items that appear disabled in a Blazor application, using CSS for visual effects and conditional rendering. +type: how-to +page_title: How to Show Tooltips on Visually Disabled Context Menu Items with Blazor +slug: tooltip-kb-display-disabled-context-menu-items +tags: tooltip, context menu, blazor, disabled items +res_type: kb +ticketid: 1678456 +--- +## Environment + + + + + + + +
ProductTooltip for Blazor
+ +## Description + +This knowledge base article answers the following questions: +- How can I display tooltips on disabled context menu items in Blazor? +- Is it possible to make menu items appear disabled but still interact with tooltips in Blazor? +- How to apply conditional tooltips on visually disabled elements in a Blazor application? + +## Solution + +By default, disabled elements are not interactive, meaning they don’t trigger events like hover, click, or tooltip. However, you can achieve the desired behavior by making them appear visually "disabled" while keeping them interactive for tooltips with the CSS shown below. + +`````RAZOR + + +
+ Right-click (or tap and hold on a touch device) for a Context Menu. +
+ +DISABLE ELEMENTS + + + + +
+ @context.Text +
+ + + + + + + +@code { + private List MenuItems { get; set; } + + private bool DisabledElements = false; + + public void SwitchHandler(bool value) + { + DisabledElements = value; + foreach (ContextMenuItem menuItem in MenuItems.Where(p => p.ItemType == "A")) + { + menuItem.ItemDisabled = DisabledElements; + } + } + + protected override void OnInitialized() + { + MenuItems = new List() + { + new ContextMenuItem + { + Text = "Item 1", + ItemType = "A" + }, + new ContextMenuItem + { + Text = "Item 2", + ItemType = "A" + }, + new ContextMenuItem + { + Text = "Item 3", + ItemType = "B" + }, + new ContextMenuItem + { + Text = "Item 4", + ItemType = "B" + } + }; + + base.OnInitialized(); + } + + public class ContextMenuItem + { + public string Text { get; set; } + public ISvgIcon Icon { get; set; } + public bool ItemDisabled { get; set; } + public string ItemType { get; set; } + } +} +````` + +## See Also + +- [Telerik UI for Blazor Tooltip Documentation](slug:tooltip-overview) +- [Telerik UI for Blazor ContextMenu Documentation](slug:contextmenu-overview) From afb0596e1fa1600767f5ecd4f98c21fcd414d148 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 7 Mar 2025 16:00:57 +0200 Subject: [PATCH 2/2] chore(Tooltip): add suggestions as per comments --- ...tip-display-disabled-context-menu-items.md | 51 ++++++------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/knowledge-base/tooltip-display-disabled-context-menu-items.md b/knowledge-base/tooltip-display-disabled-context-menu-items.md index 493d54223..273388531 100644 --- a/knowledge-base/tooltip-display-disabled-context-menu-items.md +++ b/knowledge-base/tooltip-display-disabled-context-menu-items.md @@ -1,5 +1,5 @@ --- -title: Display Tooltips on Disabled Context Menu Items +title: Display Tooltip on Disabled Context Menu Items description: Learn how to show tooltips over menu items that appear disabled in a Blazor application, using CSS for visual effects and conditional rendering. type: how-to page_title: How to Show Tooltips on Visually Disabled Context Menu Items with Blazor @@ -27,7 +27,7 @@ This knowledge base article answers the following questions: ## Solution -By default, disabled elements are not interactive, meaning they don’t trigger events like hover, click, or tooltip. However, you can achieve the desired behavior by making them appear visually "disabled" while keeping them interactive for tooltips with the CSS shown below. +By default, disabled elements are not interactive and don’t trigger events like hover or click. Thus they don't integrate with tooltips. However, you can achieve the desired behavior by making them appear visually disabled while keeping them interactive for tooltips with the CSS code below. `````RAZOR
Right-click (or tap and hold on a touch device) for a Context Menu.
-DISABLE ELEMENTS +Disable Menu Items -
+
@context.Text
- - - + @code { private List MenuItems { get; set; } @@ -78,29 +74,14 @@ DISABLE ELEMENTS protected override void OnInitialized() { - MenuItems = new List() - { - new ContextMenuItem - { - Text = "Item 1", - ItemType = "A" - }, - new ContextMenuItem - { - Text = "Item 2", - ItemType = "A" - }, - new ContextMenuItem - { - Text = "Item 3", - ItemType = "B" - }, - new ContextMenuItem - { - Text = "Item 4", - ItemType = "B" - } - }; + var itemTypes = new[] { "A", "B" }; + MenuItems = Enumerable.Range(1, 4) + .Select(i => new ContextMenuItem + { + Text = $"Item {i}", + ItemType = itemTypes[(i - 1) / 2] + }) + .ToList(); base.OnInitialized(); }