Getting component/HTML name from ElementReference

I have a MouseEnter event that triggers a tooltip. I am using strings pulled dynamically from a resx file for the tooltip. In the MouseEnter function, I have access to the ElementReference of the triggered component. What I would like is to obtain the HTML Name attribute for that component, using the ElementReference.

Is there any way to do this? My reasoning is I can name the RESX string objects with my component names and the tooltip will pull them automatically if I had that name....

I realize I could probably call into javascript and return the DOM name, but is there any way to keep this on the C# side of things?


No, the ElementReference does not expose such properties. It is used internally by Blazor for JS Interop purposes. Perhaps you can add an extra parameter to your MouseEnter event handler e.g.

<RadzenButton MouseEnter=@(element => OnMouseEnter(element, "button")) />
<RadzenLabel MouseEnter=@(element => OnMouseEnter(element, "label")) />

I decided to use interop after all. This setup works with non-Radzen components as well, just have to include a "name" attribute on it. Now I have dynamic tooltips for both Radzen and regular html comps! I just name the resx string "tt-XXXX" where XXXX is my design time name on the component.

var Utils = Utils || {};
Utils.getName = function (element) {

protected async System.Threading.Tasks.Task ComponentMouseEnter(ElementReference elementReference)
	string componentName = await JSRuntime.InvokeAsync<string>("Utils.getName", elementReference);
	string tip = Shared.Resources.ResourceManager.GetString("tt-" + componentName, Shared.Resources.Culture);
	if (tip != null)
		tip = tip.Trim();
		if (tip != "")
			TooltipService.Open(elementReference, $"{tip}", new TooltipOptions() { Duration = 60000, Style = "background-color: black;", Position = TooltipPosition.Bottom });

<div @ref="div1" name="div1" @onmouseenter=@(() => ComponentMouseEnter(div1)) @onmouseleave=@(() => ComponentMouseLeave(div1))></div>

<RadzenTextBox Name="TextBox1" MouseEnter="@TextBox1MouseEnter" MouseLeave="@TextBox1MouseLeave" ></RadzenTextBox>

protected async System.Threading.Tasks.Task TextBox1MouseEnter(ElementReference args)
            await ComponentMouseEnter(args);